state 사용 (state값 초기화, props값 설정 )

한번쯤은 render라는 함수 밑에 선언되어있는 props의 값이 맘에 안들때가 있을겁니다.

props의 값

이 props의 값을 state로 만들고 그 state값을 subejct의 props로 전달하도록 만들겠습니다.

 

 

 

1. state값을 초기화 하는 과정입니다.

다음과 같이 선언하면. render함수보다 먼저 실행이 되면서 그 컴포넌트를 초기화 해주고싶은 코드를 constructor 안에 작성합니다.

 

 

 

2. state 초기값 설정 후 props값 설정합니다.

그래서 this.state로 초기값을 설정한후에, 그 설정된 값을 render함수 안에 있는 Subject 컴포넌트에 대입시킵니다.

 

 

그럼 index.js파일로 가볼까요?

App이라고 선언된것만 봤을때는 state를 사용했다는것을 알 수 있을까요? 아닙니다. 전혀 알 수 없기 때문에 정말 훌륭한 코드를 짠것입니다.

 

<App/>이 내부적으로 사용할 상태는 state라는 형태를 이용합니다.

그리고 <Subject/>라는 컴포넌트에 props 값으로 줍니다.