useState 확실하게 사용하기 (함수형 업데이트)

🎀 useState의 비동기 처리

페이지에는 다양한 상태값이 존재하고, 또 리렌더링되어야 할 가능성이 있다.
만약 모든 상태가 계속해서 불필요하게 업데이트된다면 성능이 저하될 것이다.

이때문에 react는 최적화를 위해 useState를 한꺼번에 모아 비동기로 처리한다.

const Test = () => {
  const [test, setTest] = useState(0);

  const handleClickButton = () => {
    setTest(test + 1);
    setTest(test + 1);
    setTest(test + 1);
  };

  console.log(test);

  return (
    <button
      type="button"
      onClick={handleClickButton}
    >
      {test} 입니다.
    </button>
  );
};

위 코드의 기대 결과값은 1이 3번 증가하여 누를때마다 3 증가한 숫자가 반영되는 것이다.

하지만 신기하게도 1씩 증가하고 있다.
바로 비동기 처리 때문에 useState 호출 시점과 실제 상태 업데이트 시점이 다르기 때문이다.

🎀 useState의 올바른 사용 - 함수형 업데이트

const Test = () => {
  const [test, setTest] = useState(0);

  const handleClickButton = () => {
    setTest((currentNum) => currentNum + 1);
    setTest((currentNum) => currentNum + 1);
    setTest((currentNum) => currentNum + 1);
  };

  console.log(test);

  return (
    <button
      type="button"
      onClick={handleClickButton}
    >
      {test} 입니다.
    </button>
  );
};

이때 함수형 업데이트를 사용하게 되면 이전 값에 의존하지 않고 항상 최신 값을 업데이트하기 때문에 안전하게 사용 가능해진다!

또 이를 순수함수라고 볼 수 있다.
외부의 상태에 의존하지 않고 매개변수를 통해 주어진 상태(여기서는 최신 상태)에만 의존하기 때문.
순수함수의 장점은 side effect가 없다는 것이다.

이제 원하는대로 3씩 증가하게 되었다.

🎀 마무리

react는 일부 함수형 프로그래밍 형태를 띄고있다.
특히 state를 변경할 때에는 불변성을 유지하도록 권장하고 있다하니 참고하여 작업하자!

👉🏻 압도적 감사 (참고 자료)
useState는 동기 비동기? (동기적 처리)