[React] State 함수형 업데이트

리액트의 setState 함수는 비동기적으로 작동한다는 특성을 가지고 있기 때문에 업데이트 된 상태가 즉시 반영되지 않고 리렌더링이 된 후에 업데이트된 state가 반영된다.

const [count, setCount] = useState(0)

const plusCount = () => {
  setCount(count+1);
  setCount(count+1);
  setCount(count+1);
}

plusCount();

즉, 위와 같은 상황이라면 count의 값은 3이 되어야 할것 같지만, 이 경우에 count의 값은 1이다.

이러한 특징을 해결하고 안정적으로(예상된 결과를 얻을 수 있도록) state를 활용하기 위해 함수형 업데이트를 사용할 수 있다.
즉,setState에 변경할 값이 아닌 값을 변경해주는 함수를 넣어주는 것이다.

setState안에 들어올 함수에는 매개변수를 넣을 수 있는데, 변경 전 state의 값을 인자로 받는다.
위의 코드를 함수형 업데이트로 변환하면 다음과 같다.

const [count, setCount] = useState(0)

const plusCount = () => {
  setCount(count => count+1);
  setCount(count => count+1);
  setCount(count => count+1);
}

plusCount();

이렇게 작성하게 되면 count의 값이 동기적으로 적용되어 최종 값은 기대한대로 3이 나오게 된다.
setCount(count=> count+1)에서 인자 count는 변경 전의 count의 값인 0이 된다.(count가 아닌 prev등 다른 단어로 사용해도 무방하다.)