[React] useState는 동기일까? 비동기일까?

useState는 동기일까? 비동기일까?

결론부터 말하자면 React에서 setState를 호출하면 상태 업데이트는 일반적으로 비동기적으로 처리됩니다.

이는 React가 여러 상태 업데이트를 batch 처리하고, 성능을 향상시키기 위해 상태 업데이트를 함께 묶어서 처리하기 때문입니다.

예를 들어, 다음과 같이 useState를 사용하여 상태 변수를 업데이트하는 예제를 살펴봅시다.

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
    console.log(count); // 이 부분에서는 업데이트된 count 값을 가져오지 못합니다.
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

위의 예제에서 setCount를 호출한 직후에 console.log(count)를 실행하면 업데이트된 count 값을 가져오지 못합니다.

setCount는 비동기적으로 처리되며, React는 상태 업데이트를 batch로 처리하여 성능을 최적화하기 때문입니다.

 

리액트에서 batch 처리란?

리액트는 불필요한 렌더링을 줄이기 위해서 state 변경 호출을 단 한번의 호출로 합니다.

이렇게 합치는 과정을 batch라고 합니다.

batch를 하기 위해 함수는 비동기로 처리가 되어 변경됩니다.

 

useState를 동기적으로 사용하려면?

useState만큼 많이 사용하는 hook인 useEffect를 사용하면 됩니다.

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 hook입니다.

다음 코드처럼 useEffect의 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 동기적으로 사용가능합니다.

useEffect(() => {
  // ... //
},[바꾸고싶은 state]);