[ React ] useState 복습과 state 세팅의 2가지 방법

function App() {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        //setCounter(counter + 1);
        setCounter((current) => current + 1);
      };
      return (
        <div>
          <h3>Total Clicks : {counter}</h3>
          <button onClick={onClick}>Click me!</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);

 

위 컴포넌트는 단순하게 Click me! 버튼을 누르면

Total Clicks 의 카운터가 올라가는 간단한 구조이다.

 

일반적인 카운터의 상태 변경은

setCounter(counter + 1)

 

위 코드를 통해 카운터의 상태를 업데이트 할 수 있다.

 

하지만 setState() 는 즉각적인 명령이 아니라 컴포넌트를 갱신하라고 요청하는 것이다.

setState() 는 컴포넌트를 항상 즉각적으로 갱신하지 않으며,

오히려 여러 변경 사항과 함께 일괄적으로 갱신하거나, 나중으로 미룰 수 있다.

 

한마디로 useState의 값을 설정해주는 두번째 인자인 modifier는

비동기적이기에, re-rendering 할 때 다 모아 한번에 값을 갱신한다는 말이다.

 

이로인해 setState() 를 호출하자마자 this.state 에 접근하는 것은

잠재적인 버그 발생의 원인을 가질 수 있다.

 

따라서, 이전 state 값을 기준으로 state 값을 설정해야 한다면

setState((state)=> state+1)

 

위 방법을 사용하는 것이 안전하다.

 

마찬가지로

function onClick() {
setCounter(counter + 1);
setCounter(counter + 1);
}

 

실수로 위의 방식대로 코드를 짜버렸을 때 디버깅이 어려워지는 것을

방지하기 위해 함수형으로 작성하는 것이다.