[4 - 9] 이벤트 처리하기 (state 업데이트)

 

★ porps는 데이터와  콜백함수도 자식 컴포넌트에게 전달할 수 있다.

 

★habit컴포넌트의 부모 habits 안에 있는 데이터에 맞게 자식 컴포넌트의 데이터가 표기가 되고 클릭 이벤트가 발생하면 자체적으로 처리하는 것이 아니라 전달된 props에 있는 콜백함수를 이용해 결국은 부모함수에 있는 콜백함수를 호출하는 것이다.

 

★state는 부분적으로 업데이트될 수 없고, 전체적으로 업데이트를 해주어야 한다.

 

hnadleIncrement 함수 정리:

const habits = [...this.state.habits] ← state에 habits이라는 배열 안에 3개의 오브젝트를 그대로 복사.

const index = habits.indexOf(habit); ← 클릭했을때 habits안에 오브젝트 중 클릭한 것을 가르킬 수 있다.

habits[index].count++ ← 클릭한 habit오브젝트안에 count값을 1씩 증감시켜준다.

this.setState({habits}) ← 업데이트된 count값이 적용된 state값을 초기값으로 업데이트해준다

 

render함수 안에서 함수를 정의하는 것은 좋은 방법이 아니다. render함수는 state가 업데이트될때 마다 정의된 함수가 계속 다시 만들어진다.

 

만약 state가 여러가지에 걸쳐있어 많이 공통적으로 사용되어 진다면 상위 컴포넌트로 가지고 나와 데이터를 설정. props로 데이터를 자식 컴포넌트로 전달. 이 데이터를 업데이트 하기 위해서는 내부적으로(자식 컴포넌트 자체적으로)하는 것이 아니라 prop으로 전달된 콜백함수를 활용해서 부모 컴포넌트에 전달해 업데이트해야 한다.

 

★state는 컴포넌트가 자체적으로 가지고 있는 정보.

- 필요/상황에 따라 부모 또는 자식에게 state값을 설정할 수 있다.

★props는 외부로 부터 가져오는 정보.

- props는 부모로부터 자식에게, 아래로 향한다. 상속의 개념이 아닌 인자로써 넘겨주는 것. (데이터, 콜백함수를 전달해 준다.)