React 스터디 노트 #2. State

- state는 props와 함께 가장 헷갈리는 부분

- component가 실행될 때 초기화를 담당하는 부분: constructor()

constructor(props){
    super(props);
    this.state = {
    	subject:{title:'WEB', sub:'World Wide Web'}
    }
}

- 외부에서 볼 수 없게 은닉하는 방법이다.

- 상위 component의 state 값을 하위 component의 props로 전달할 수 있다.

- state는 바꿀 수 있지만 props는 전달 받기만 하고 직접 바꿀 수는 없다.

 

// App의 consturctor 안
this.state = {
	contents: [
    	{id:1, title: 'HTML', desc: 'HTML is blar blar'},
        {id:2, title: 'CSS', desc: 'CSS is blar blar'},
        {id:3, title: 'JS', desc: 'JS is blar blar'},
    ]
}

- contents 안에 배열로 3개의 항목을 만들었다.

- 이렇게 하면 해당 파일을 열어서 일일히 고치지 않고 constructor에 있는 this.state 안에서만 바꿔서 수정할 수 있다.

- 주의사항: 자동으로 엘리먼트 여러 개를 생성할 경우에는 unique "key" prop라는 에러가 발생한다. 

 

lists.push(<li key={data[i].id}><a href={...}</a></li>);

- key={data[i].id} 이 부분이 key를 설정해주는 부분이다.