State and Lifecycle

https://ko.reactjs.org/docs/state-and-lifecycle.html을 읽고 정리한 글입니다.

 

• State : props와 유사하지만, 비공개이며 컴포넌트에 의해 제어된다
• componentDidMount() : 컴포넌트 출력물이 DOM에 렌더링된 후 실행
• componentWillUnmount() : 컴포넌트가 마운트 해제되어 제거되기 직전에 호출
  • 다시 렌더링되지 않으므로 이 안에서 setState() 호출 불가능
• State
  • setState()를 이용해 state 값 수정하기
  • 업데이트는 비동기적
  • 여러 개의 변수를 독립적으로 업데이트

// Correct 1
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

// Correct 2
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

• 데이터의 방향은 하향식(top-down) 또는 단방향식(unidirectional)
  • 데이터는 아래 컴포넌트에만 영향을 주며, 아래 컴포넌트는 데이터가 자신의 바로 위 컴포넌트에서 왔는지, 그보다 더 위의 컴포넌트에서 왔는지 알지 못한다