[React] useState는 비동기로 작동한다!

스탑워치를 만들면서 리액트에 대해 새롭게 알게된 내용이 너무 많아서.. 계속해서 블로그 글을 올리게 됐습니다 ㅠ

리액트를 공부하면 공부할수록 제가 아무것도 모르고 프로젝트를 진행했구나 하는 생각이 드네요!

 

목차

---

0. useState의 기초

useState를 통해 리렌더링을 유발하는 변수를 생성하고 사용할 때의 가장 기초적인 내용은 바로 getter와 setter개념입니다.

 

우리는 아래와 같은 방식으로 useState를 사용합니다.

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

 

여기서 앞에 오는 count이 getter, setCount이 setter가 됩니다.

count에 요소를 새롭게 넣어주고 싶을 때는 setCount을 쓰고, count를 읽어오고 싶을 때는 count을 사용하는 방식이죠.

 

여기까지는 아주 이해하기 쉽습니다.

하지만 어떤 함수 안에서 setCount을 두번 동작하게 하고 싶을 수 있습니다.

 

import React, { useState } from "react";
import ReactDOM from "react-dom";

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
          setCount(count + 1);
        }}
      >
        Click me
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

 

위 코드를 실행해서 버튼을 누르면 어떻게 될까요?

setCount가 두번 동작하니 2씩 증가하는 것처럼 예상될 수 있겠지만, 실제로 해보면 1씩밖에 증가하지 않습니다.

 

 

정말 신기하죠??

 

---

1. 도대체 왜..?

위 현상의 원인은 바로 setState가 비동기로 동작하기 때문입니다.

 

리액트는 상태값이 바뀌면 렌더링이 되는데, 만약 setState가 동시에 100개가 있는데 100번 렌더링이 이루어진다면?? 정말 비효율적이겠죠??

 

이런 상황을 없애기 위해 리액트에서는 객체의 값이 변하게 되는 경우 해당 컴포넌트의 setState로 인한 값의 변화를 모두 취합해서 한번에 처리한 후에 한번만 렌더링되도록 합니다.

그래서 100번의 렌더링이 일어나지 않고 1번의 렌더링으로 값의 변화를 처리하게 되는 것이죠.

 

그런데 이 과정에서 count는 하나의 고정값이 됩니다. 이 말은 즉 하나의 count에 +1하는 일을 여러번 반복하는 것이죠.

결국 렌더링이 될 때는 해당 count를 변화시키는 setCount는 마지막 요소만 적용됩니다.

 

아래와 같은 경우 setCount(count+1); 만 적용이 되는 것이죠.

 

 

그렇다면 우리가 원하는 대로 동작하게 하려면 어떻게 할 수 있을까요?

바로 값이 아닌 함수를 전달하는 방식입니다.

 

실제로 공식문서에는 setState의 매개변수로 updater와 callback이 들어갈 수 있다고 나와있는데, updater에는 함수가 들어갈 수 있습니다.

 

 

함수의 매개변수로는 기존의 값(예제에서의 count)이 들어가게 되고, 함수의 결과값으로는 변동될 요소를 넣어준다면 실시간으로 state가 최신값을 유지하게 됩니다.

 

 

정리하면 setter는 동시에 여러개 존재하더라도 무시되는 것이 아니라 모두 실행되고, 대신 setter에 직접 값을 부여하는 경우에는 마지막 요소 한번만 적용이 되게 됩니다.

만약 항상 최신값을 사용하고 싶은 경우에는 값 대신 함수를 넣어주는 방식을 선택할 수 있겠죠?!

 

---

2. 참고자료

리액트 react setState는 비동기로 동작한다.

[번역] useEffect 완벽 가이드

A Complete Guide to useEffect