컴포넌트 State

setState 역할

컴포넌트의 state 객체에 대한 업데이트를 실행. state가 변경되면, 컴포넌트는 리렌더링된다.

state와 props의 차이점

props는 컴포넌트에 전달되는 반면 state는 컴포넌트 안에서 관리

setState 주의할점

setState 호출은 비동기적으로 이루어진다. 따라서 항상 setState가 가장 최신의 state 값을 보장하기 위해서는 setState에 객체 대신 함수를 전달해야 한다

incrementCount() {
  this.setState((state) => {
    // 중요: 값을 업데이트할 때 `this.state` 대신 `state` 값을 읽어옵니다.
    return {count: state.count + 1}
  });
}

handleSomething() {
  // `this.state.count`가 0에서 시작한다고 해봅시다.
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();

  // 지금 `this.state.count` 값을 읽어 보면 이 값은 여전히 0일 것입니다.
  // 하지만 React가 컴포넌트를 리렌더링하게 되면 이 값은 3이 됩니다.
}

언제 setState가 비동기적인가

현재의 경우 이벤트 핸들러내에서 비동기적이다.
이로 인해 부모와 자식이 모두 click이벤트에서 setState를 호출한다면 자식은 두번 렌더링되지 않는다. 대신 React는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트한다.

동기적으로 업데이트하지 않는 이유

불필요한 렌더링을 방지하면서 성능을 향상시킨다. 또한 동기적으로 업데이트 하는 경우 props와 state 사이의 일관성을 해칠 수 있다.