React(9) State로 내용구현하기

props가 사용자가 직접 component를 만날수있는 최전방이라면, 

state는 컴포넌트 내부에서 관리되는 내용이다. (사용자가 알필요도 없고 만날일도 없다.)

 

props와 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리해서

양 쪽이 각자의 자리에서 역할을 하게 만드는 것이다.

 

오늘할일 

- App 클래스의 하위 컴포넌트인 <Subject>와 <Main>의 props와 state를 나누어 보자

 

App.js

1. constructor()를 선언한다.

컴포넌트가 실행될 때 constructor 함수가 제일 먼저 실행되어 state를 미리 기억해놓는다. 

 

2. 뒤이어 바로 render()의 내용을 변경해준다.

<사용자정의태그 props이름={this.state.data이름.props이름}> 요런형식으로 state가 들어갈 구멍을 뚫어놓는다.

하드코딩할때 쓰는 props=" " 대신에 state용으로 props={ } 중괄호를 사용한다. 

App.js이 내부적으로 만드는게 state이고, props값에 state값을 전달한다. 

기존 Main.js

자, 원래 Main.js 코드이다. 빨간박스안의 하드코드를 쓰지않을거다. 하지만 결과는 똑같이 나오게 만들거다.

수정전 Main.js (하드코드로 점철되있군...)

state를 적용한 Main.js

App.js 부모가 가진 state를 이용하여 Main.js 내부데이터를 수정한다.

 

1. lists라는 배열이 들어갈 자리(변수)를 만들고

2. data라는 배열원소들 자리도 미리 마련해놓는다.

3. 그 배열 안에 App.js에서 미리 입력해놓은 content의 state들을 반복문을 통해 원소로 넣는다. (feat.<li>태그)

4. return 값으로 {lists} 배열이름을 적어주면 저장된 state data들이 나열된다.  

실행화면

**index.js에서는 <App/>코드가 state값이 있는지 없는지 알턱이없다. (사용자입장에서는 철저히 은닉되있음)