비동기로 이루어지는 setState

state를 올바르게 사용하기

React공식문서

• 직접 State를 수정하지 마세요
• State 업데이트는 비동기적일 수도 있습니다.

  React는 성능을 위해 여러 setState() 호출을 단일 업데이트로 한꺼번에 처리할 수 있습니다.
  this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 다음 state를 계산할 때 해당 값에 의존해서는 안 됩니다.

import React, { useState } from "react";

export default function App() {
  const [number, setNumber] = useState(1);

  const add = () => setNumber(number + 1);
  const subtract = () => setNumber(number - 1);
  const multiplyBy2 = () => setNumber(number * 2);
  const multiplyBy2AndAddBy1 = () => {
    multiplyBy2();
    add();
  };

  return (
    <div>
      <h1>Number : {number}</h1>
      <div>
        <button onClick={add}>+ 1</button>
        <button onClick={subtract}>- 1</button>
        <button onClick={multiplyBy2}>*2</button>
        <button onClick={multiplyBy2AndAddBy1}>*2 + 1</button>
      </div>
    </div>
  );
}

multiplyBy2AndAddBy1를 실행하면 *2+1이 아닌 그냥 1이 더해지고 있는 것을 확인할 수 있습니다.

왜냐하면 setState가 비동기로 이뤄지며 state업데이트는 병합하기 때문입니다.

그렇다면 setState함수를 여러개 써야할 때는 어떻게 해야할까요?

  const add = () => setNumber(number + 1);

위와 같이 number을 바로 넘기지 않고 함수를 넘기도록 만들 수 있습니다. 인자로는 현재의 state를 넣어줍니다.

 const add = () => setNumber((number) => number + 1);