[react] useState는 비동기?

[react] useState는 비동기?

 

useState의 비동기적 동작에

대해 알아보았습니다.

 

react로 프로젝트로 몇 개 진행하면서 자연스럽게 알게 되었지만
개념을 제대로 정리해 본 적이 없어
아주 중요한 react hooks useState는 동기인가 비동기인가에 대한 설명을 해보려고 합니다.

 

useState는 비동기인가?

• useState는 비동기적으로 동작합니다.
• 하나의 이벤트 핸들러 함수 내에서 같은 setState가 호출된다면 마지막에 실행한 setState가 실행되어 렌더링 됩니다.

 

useState는 비동기 예시

import React, { useState } from "react";

const Example = () => {
  const [count, setCount] = useState(0);

  const onClick = () => {
    setCount(count + 1); //setState 실행1 <- 실행 안함
    console.log(count);

    setCount(count + 1.5); //setState 실행2 <- 실행
    console.log(count);
  };

  return (
    <div className="box">
      <div>{count}</div>
      <button onClick={onClick}>+</button>
    </div>
  );
};

export default Example;

 

결과

 

위의 코드를 실행하면 결괏값이 동기적으로 0 -> 2.5 -> 5 -> 7.5 -> 10
이런 순으로 렌더링 된다고 생각을 하게 됩니다.
하지만 결괏값은 코드는 두 번씩 동작하였으나 count 숫자는 1.5씩 증가했습니다.

그 이유는 setState가 비동기적으로 작동하기 때문입니다. 
동일한 state를 연속적으로 업데이트하는 경우,
모든 요청에 따라 setState를 각각 동기로 수행 후 바로 리 랜더링 하는 것이 아니라
변경 사항을 모아서 한 번에 일괄 처리(batch)를 합니다.
전달된 setState를 하나로 병합한 후 
최종적으로 한 번의 setState를 하게 되어 결국 마지막 명령만 수행하게 됩니다. 

이렇게 일괄적인 batch update를 통해서 컴포넌트의 렌더링 횟수를 최소화하여
불필요한 렌더링을 방지하고 더 빠른 속도로 동작하게끔 합니다. 

 

setState를 업데이트하기 위해서는 두 가지 방법

useEffect

useEffect의 [] 빈 배열 안의 요소를 이용해 상태 값 바로 업데이트합니다.

 

함수형 업데이트

import React, { useState } from "react";

const Example = () => {
  const [count, setCount] = useState(0);

  const onClick = () => {
    setCount((count) => count + 1);
    console.log(count);

    setCount((count) => count + 1.5);
    console.log(count);
  };

  return (
    <div className="box">
      <div>{count}</div>
      <button onClick={onClick}>+</button>
    </div>
  );
};

export default Example;

 

결과

 

setState를 비동기로 수행할 때, 값을 바로 전달하지 말고 
함수를 통해 전달하는 방법입니다.

여러 번 전달받는 함수들이 큐에 저장되어 순서대로 실행하게 됩니다.
따라서 큐에서 먼저 수행된 함수의 결과로 반영된 state값이 
다음에 있는 함수의 인자로 들어가게 되므로, 항상 최신의 state를 유지하게 됩니다.