[React.js] useState의 특징(State Batch Update, 비동기)

State Batch Update란?

리액트는 컴포넌트의 렌더링 횟수를 최소화하기 위해서 State Batch Update를 사용한다. 이는 리액트의 이벤트 핸들러를 사용하여 여러 번의 setState를 호출할 때 이를 하나의 업데이트로 일괄 처리하여 리렌더링이 한 번만 발생하도록 하는 것이다. 

 

※ 특징

• state값의 업데이트는 16ms 단위로 이루어진다.
• 16ms 내 변경된 state값은 한 번에 업데이트된다.

import { useState, useEffect } from "react";

export default function App() {
  const [num, setNum] = useState(0);

  const handlePlus = () => {
    setNum(num + 1);
    setNum(num + 1);
    setNum(num + 1);
  };
  return (
    <div>
      <p>{num}</p>
      <button onClick={handlePlus}>plus</button>
    </div>
  );
}

위 코드를 보면 plus 버튼을 눌렀을 때 3이 증가한 num 값이 보일 것이라고 생각된다. 하지만 결과는 1이 증가하는 것을 볼 수 있다. 이 경우가 Batch Update 된 경우이다. Batch Update에 따라 한 번에 처리되기 때문에 setNum(num + 1) 코드에서 num 값은 세 번의 코드에서 모두 같은 초기값을 전달받기 때문이다.

 

또한 State Batch Update와 비슷한 setState 함수의 다른 특징은 바로 비동기적으로 작동한다는 점이다. 다음은 useState를 쓰다보면 자주하는 실수들이다.

import { useState, useEffect } from "react";

export default function App() {
  const [num, setNum] = useState(0);

  const handlePlus = () => {
    setNum(num + 1);
    console.log(num);
  };
  return (
    <div>
      <p>{num}</p>
      <button onClick={handlePlus}>plus</button>
    </div>
  );
}

이 코드를 작성할 때는 업데이트된 num의 값이 콘솔에 출력될 것이라고 예상했을 것이다.

하지만 화면에는 잘 업데이트된 반면, 콘솔에는 업데이트 되기 전의 num 값이 출력된다. 이는 setState 함수가 비동기적으로 작동하기 때문이다. 그렇다면 이러한 문제들을 어떻게 해결해야할까?

---

해결 방법

1. State Batch Update 문제 해결 방법

import { useState, useEffect } from "react";

export default function App() {
  const [num, setNum] = useState(0);

  const handlePlus = () => {
    setNum((num) => num + 1);
    setNum((num) => num + 1);
    setNum((num) => num + 1);
  };
  return (
    <div>
      <p>{num}</p>
      <button onClick={handlePlus}>plus</button>
    </div>
  );
}

위 처럼 함수형 업데이트 방식을 사용하면 업데이트된 state 값을 인자로 받게되어 3이 증가하게 만들 수 있다.

 

2. 비동기 문제 해결 방법

import { useState, useEffect } from "react";

export default function App() {
  const [num, setNum] = useState(0);
  useEffect(() => {
    console.log(num);
  }, [num]);
  const handlePlus = () => {
    setNum((num) => num + 1);
  };
  return (
    <div>
      <p>{num}</p>
      <button onClick={handlePlus}>plus</button>
    </div>
  );
}

useEffect의 의존성 배열에 해당 state를 추가하면 업데이트 된 이후 콘솔이 출력되게 만들 수 있다.

---