리액트(react)의 props와 state에 대하여

그전에 앞서서 리액트라는 언어가 생기게 된 배경을 설명해보도록 하겠다.

다음과 같은 네이버 웹사이트 화면이 있다.

맨위의 네이버 웨일 클릭하는 화면이 있다. 이것이 어떻게 구성되어있는지 보자..

간단해보이지만 수많은 태그로 묶여져 있는 것을 확인할수 있다. 

이런것들을 수천만개 수억개 생성해야할경우에 얼마나 많은 작업들이 있을지 상상이 가는가?...

그 점을 방지하기 위해서 facebook에서 만든 것이 react라는 툴이다.

 

그럼 react 를 사용하기 위해서는 어떻게 하면 좋을까?...

그럼 react를 검색해서 react 공식 문서로 가보자..

효율적으로 갱신하고 랜더링... 컴포넌트 기반.. 상태관리에 대한 용이.. 뭐 줄줄이 나열해 놨지만..결국 사용하기 위한 목적을 정리하면

1. 가독성 
2. 재사용성
3. 유지보수

이 세가지로 줄일수 있을거같다.

이제 react를 설치해보도록 하자.

공식 문서를 참고하면..

npx create-react-app 으로 설치를 하도록 한다.

npx install create-react-app 

npm install -g create-react-app

두개의 차이에 대해서 궁금한 사람이 있을 것이다.

npm 으로 설치를 할 경우에는 라는 것을 써서0 -g  global 한번 설치하면 모든 경로해서 사용할 수 있도록 설치하는 것(장점 react를 사용할 폴더마다 설치할 필요는 없다. 단점 업데이트를 할려면 주기적으로 자신이 업데이트 시켜줘야한다)

npx는  npm 5.2 이상부터 추가된 도구 이다. 그리고 최신 라이브러리를 설치할 떄 가져오며 데이터 사용량을 줄여준다.

다만 프로젝트를 진행할 떄마다 설치를 해줘야하는 단점이 존재한다.

위 두개의 코드의 차이점이다 .

 

그럼 이제 props에 대해서 설명을 해보겠다.

어떻게 보면 attribute 의 개념이다. 다만 충돌 방지를 위해서 props로 지정해서 만들었다.

하나의 컴포넌트에서 가지고 있는 속성들을 props로 파악하면 쉽다.

Content , Subject, TOC 라는 각각의 컴포넌트가 있다.

 

 

 

content에서 보면 title = "HTML" 과  desc = "HTML is hyperText Markup language" 이부분이 있다.

컴포넌트에서는 지정을 이렇게 해두었다. {this.props.title} 이것의 속성중에 title값을 가져온다.

{this.props.desc} 이것의 속성중에 desc 값을 가져온다.

그리고 추가적으로. state를 설명해 보겠다.

state는 재정의 및 초기값 설정을 위해서 사용된다.

위에서 객체형식으로 지정을 해준뒤에... 밑에서 사용한다.

{this.state.subjec.title} 이것의 state 값의 subject 밑의 title 값을 가져오라.

{this.state.subject.sub} 이것의 states값의 subject 밑의 sub값을 가져오라.

하위 컴포넌트를 불러오고 재정의를 할 것들을 적는 것... 중요하다.

그리고 객체형식으로 적어야 한다.