useState 함수형 업데이트

이전 useState와 useRef를 비교하는 포스팅에서 useState의 값의 변화와 re-render의 과정이 비동기적으로 이루어진다고 했는데 useState의 set에서 함수형 업데이트를 통해 동기적으로 사용하는 방식에 대해 살펴보려 합니다.

 

useState 비동기적 set 함수

예시코드를 간단하게 확인해보겠습니다.

import { useState } from "react";

function HooksTest() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      HooksTest
      <button onClick={() => updateCount()}>Count UP</button>
      useState count is {count}
    </div>
  );
}

export default HooksTest;

 

예시 코드에서 updateCount 함수 실행 시 3이 아닌 1씩 값이 증가됨을 확인할 수 있습니다. 예시를 통해 useState의 set 함수는 동기적으로 처리되지 않고 일괄적으로 처리되는 것을 알 수 있습니다. 

 

이러한 방식은 React에서 동일한 state의 set 함수를 병합하여 마지막 set 함수만 동작하기 때문입니다. set 함수가 동기적으로 각각 동작하지 않고 비동기적으로 batch 처리하는 것은 동일한 set 함수가 동작할 때마다 리렌더링이 되는 것을 막아 성능적인 이슈를 제한하기 위함입니다.

 

useState 동기적 처리 함수형 업데이트

useState set 함수의 이러한 특성을 피하기 위해 set 함수에서 함수형 업데이트를 전달합니다. useState의 set 함수의 함수형 업데이트 확인을 위해 react types의 useState 내부 로직을 살펴보겠습니다.

type SetStateAction<S> = S | ((prevState: S) => S);

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

 

위의 Dispatch<SetStateAction<S>>의 SetStateAction 부분을 보면 이전 상태를 받을 수 있게 되어있습니다. 이전 상태를 전달하는 함수형 업데이트로 구현 시 useState 내부 hook 객체의 queue에 상태 업데이트들이 연결 리스트로 저장되어 차례로 진행되며 앞서 업데이트된 상태를 전달받아 계속 업데이트가 진행됩니다. 이렇게 useState set 함수에 이전 상태를 전달하는 함수를 전달하여 최신 상태로 유지하게 합니다.

 

위의 예시 코드를 함수형 업데이트 형태로 변환하면 아래와 같습니다.

import { useState } from "react";

function HooksTest() {
  const [count, setCount] = useState(0);

  const updateCount = () => {
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      HooksTest
      <button onClick={() => updateCount()}>Count UP</button>
      useState count is {count}
    </div>
  );
}

export default HooksTest;

 

그리고 값이 1이 아닌 3이 증가됨을 확인할 수 있습니다.

 

마무리

이번 useState에 대한 내용은 React를 처음 도입하여 사용할 때 팀원들과 useState 이슈에 대해 이야기 나눈 내용을 개인적으로 남겨두었다가 정리하여 포스팅하게 되었습니다. 꽤 시간이 흘렸지만 React useState 기본 개념에 대한 중요성은 변하지 않았던걸 알 수 있었습니다. 자주 사용하며 쉽게 지나치는 것들에 대해 주의 깊게 봐야겠습니다.

---

참고 자료

https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state

https://garve32.tistory.com/39

https://goidle.github.io/react/in-depth-react-hooks_1/