🥜 [ React ] react 학습내용 나름대로 정리하기 1

드림코딩, 노마드코더, 게임으로 배우는 react 강의 수강.

 

 

 

 

 

 

React란?

 

웹 UI를 만들 수 있는 컴포넌트로 이루어진 UI 라이브러리이다. (그러나 프레임워크에 더 가깝다)

 

싱글페이지 어플리케이션에 최적화되어있으며 웹앱의 느낌을 내기 때문에 사용자 경험에 좋다 

 

특징

- component 

- jsx

- virtual dom

- 단방향 데이터 바인딩

 

 

1. component

 

-독립적

-고립됨

-재사용가능

 

헤더, 푸터, 버튼, 아티클 단위로 묶어서 한 가지 기능을 전문적으로 수행하는 컴포넌트 단위로 관리할 수 있다.

따라서 특정 부분에 오류가 발생했을 시, 그 컴포넌트만 수정하는 것으로 해결할 수 있어 유지보수에 좋다.

또한 한번 사용한 컴포넌트를 다시 사용할 수 있는 재사용성이 높다.

 

 

 

 

 

 

 

 

React 설치

 

 

react를 설치하기 전에

node.js파일이 미리 설치되어 있어야 한다.

node.js는 라이브러리들을 관리할 수 있게 도와주는 패키지매니져로,

이를 이용하면 명령어 하나로 간단하게 라이브러리를 설치, 업데이트, 삭제할 수 있다.

 

node.js가 설치되며 npm( Node Package Module )이 함께 설치된다.

 

npm을 이용하게 되면 프로젝트에 package.json이라는 파일이 생기는데, 이 패키지 파일을 살펴보면 우리가 설치한 외부라이브러리의 버전정보가 들어있다.

 

npm은 원하는 라이브러리의 설치와 업데이트를 도와주지만

실제로 실행시키는 툴은 npx( npm에서 제공해주는 CLI 도구 )이다.

 

 

 

 

 

 

 

cmder & cmd에 가서

npx create-react-app my-app

로 설치해주면 된다.

 

 

 

 

 

 

 

 

 

props? state?

 

 

- state

그 컴포넌트가 자체적으로 가지고 있는 데이터.

component 내부에서 사용할 수 있다

 

- props

부모 컴포넌트로부터 받아온 proporty.

부모에게서 props 데이터를 얻거나, 자식 components에게 데이터를 넘기는 목적으로 이용된다.

부모게에서 받아온 props데이터를 변화시킬 수 없다.

 

 

예를 들어 자식 컴포넌트가 부모에게서 받아온 props 데이터가 boolean 값으로 true를 가지고 있다면,

이 props 값을 이용해 자식 컴포넌트의 state를 조작할 수는 있지만 props값을 조작할 수는 없다.

따라서 내부적 관리는 state를 통해 이루어진다.

 

그러나

state값을 직접 변경하면 안되고

class에서는 함수의 형태로,

함수형에서는 useState를 이용해서 변경해야 한다.

 

 

 

 

 

 

 

 

 

render

 

props와 state는 모두 render이라고 하는 함수 호출을 유발한다.

 

렌더링이 수행될 때 (render함수가 호출될 때)

1. props / state가 변경되었을 때

2. 부모 컴포넌트가 렌더링되었을 때

발생한다.

 

render함수가 호출(재구축)되면 화면이 다시 그려진다

즉

react에서는 props나 state의 값이 바뀌면 해당 component의 render함수가 다시 구축되며 화면이 다시 그려지는 것이다.

 

 

 

 

 

 

react UI

 

jsx를 이용한다.

jsx는 js를 확장한 문법으로 js와 xml을 더한 것 처럼 생겼다.

jsx는 class를 선언할 때 'className'과 cammelCase 를 이용한다.

 

 

사실 브라우저는 js가 아닌 언어는 이해할 수 없다.

그러나 jsx를 이해할 수 있는 이유는 '바벨' 덕분이다.

이 jsx 코드를 바벨이 html과 js로 변환시키기 때문에 이용이 가능하다.

 

주의 : 형제 노드를 쓸 수 없다.

형제 노드를 써야 할 때 노드들을 묶어줘야 한다