useState 주의사항

뭘 조심해야 할까👀

비동기 & batching

• useState 훅을 사용해서 상태를 업데이트 하고 바로 아래  console로 업데이트한 상태를 출력하면 이전의 상태 값이 나온다.

const updateCount = () => {
  setCount(count + 1); // 2
  console.log(count); // 1
}

• 왜 이럴까? 리액트에서 useState를 사용해서 상태를 업데이트할 때 비동기적으로 상태를 한번(batching)에 업데이트하기 때문이다.
  → 바로 값이 변경되면 리렌더링(Re-rendering)이 발생하기 때문이다!
• 만약 변경된 상태를 이용하고 싶으면 useEffect를 이용해서 상태가 변경된 후 상태를 사용하자!

const updateCount = () => {
    setCount(count + 1)
}
useEffect(() => {console.log(count)},[count]);

 

• 잘 이해가 안되면 아래 예시를 살펴보자!
• 아래처럼 서로 다른 두 상태가 업데이트 되면 렌더링이 두번 일어나야 할 것 같지만 상태를 비동기적으로 한번에 처리하기 때문에 렌더링이 한번만 일어난다!

const updateCount = () => {
  setCount(count + 1)
  setCount2(count2 + 1);
}

• 아래 예시를 살펴보자 rendering 상태는 count나, count2 상태가 변할 때마다 1씩 증가한다
• 버튼을 눌렀을 때 2씩 증가해야 할 것 같지만 하나씩만 증가한다!

import {useEffect, useState} from "react";

const App = () => {
  const [count, setCount] = useState(1);
  const [count2 ,setCount2] = useState(2);
  const [rendering, setRendering] = useState(0)
  const updateCount = () => {
    setCount(count + 1)
    setCount2(count2 + 1);
  }
  useEffect(() => {
    setRendering(rendering+1)},
    [count, count2]);
  return (
    <>
      <button onClick={updateCount}>update</button>
      <h1>{count}{count2}</h1>
      <h1>{rendering}</h1>
    </>
  );
}

export default App;

• 컴포넌트가 한번에 업데이트되기 때문에 rendering 상태가 1씩 증가한다!

• 만약 아래와 같은 상황이 벌어지면 어떻게 될까?

같은 상태 동시에 업데이트할 때

• 버튼을 눌렀을 때 count가 3씩 증가해야 될 것 같지만 1씩만 증가한다!

import {useState} from "react";

const App = () => {
  const [count, setCount] = useState(1);
  const updateCount = () => {
    setCount(count + 1)
    setCount(count + 2);
  }
  return (
    <>
      <button onClick={updateCount}>update</button>
      <h1>{count}{count2}</h1>
    </>
  );

}

export default App;

• 이러한 이유는 리액트가 렌더링을 효율적으로 렌더링하기 위해서 여러 상태를 일괄적(batching)으로 처리하기 때문에 호출 순서대로 바로 업데이트하지 않고 파라미터로 전달된 객체들을 하나로 합치는 작업을 한다!
  → 따라서, 마지막에 호출된 상태 변경 함수만 실행된다!

 

• 이러한 문제를 해결하기 위해서 함수형 업데이트를 사용할 수 있다!

import {useState} from "react";

const App = () => {
  const [count, setCount] = useState(1);
  const updateCount = () => {
    // 함수형 업데이트
    setCount(prev => prev + 1)
    setCount(prev => prev + 2);
  }
  console.log(1)
  return (
    <>
      <button onClick={updateCount}>update</button>
      <h1>{count}</h1>
    </>
  );

}

export default App;