<state>
- component가 좋은 부품이 되기 위해서는 component를 사용하는 외부의 props와 그 props를 구현하는 state가 철저하게 구분되어 있어야 한다.
- component가 실행될 때 constructor 함수가 존재하면 가장 먼저 실행되어 초기화를 담당한다.
- constructor(props) {
super(props);
this.state = {
subject:{title:'WEB', sub:"World Wide Web!"}
}
}
→ subject의 state값을 위와 같이 설정
- <Subject
title={this.state.subject.title}
sub={this.state.subject.sub}></Subject>
→ App component의 state값을 Subject component의 props값으로 준다.
→ 상위 component의 상태를 하위 component로 전달하고 싶을 때, 상위 component의 state를
하위 component의 props값으로 전달할 수 있다.
- TOC의 data가 바뀌더라도 자동으로 추가되도록 만들어보자.
1) state에 contents property 추가 (id값 부여)
2) TOC component 수정
- while문으로 data의 길이만큼 push해주기
- lists.push(<li key = {data[i].id}><a href={"/content/"+data[i],id}>{data[i],title}</a></li>);
3) <TOC data={this.state.contents}></TOC>로 수정
- data props값을 상위 conponent인 App의 state의 contents property값에서 가져온다.
→ App의 state값 중 contents의 목록을 추가하거나 제거해도 TOC component를 직접 수정할 필요 없이
자동으로 목록이 바뀐다. (data가 바뀌었다고 logic을 바꾸지 않아도 된다.)
- 복수의 elements를 생성할 때는 key라는 특수한 props를 사용한다.
ex) key = {data[i].id} : 여러 개의 elements를 자동으로 생성할 때는 각각의 목록을 다른 것들과 구분할 수 있도록
식별자를 key값으로 써준다. 이는 react가 내부적으로 필요해서 요구하는 것이다.
→ state와 props의 관계
부모인 App의 입장에서는 내부의 정보인 state를 사용하고, 이를 자식에게 전달할 때는
props(ex. data={this.state.contents})를 사용해 전달한다.
