react 에서 setState를 동작시키다 보면 내가 원하던 동작처럼 처리가 안되는 상황이 발생합니다.

이는 setState함수는 동기처리가 아닌 비동기처리 가 되어 이러한 상황이 발생합니다.

import { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [age, setAge] = useState(20);

  const handlClick = () => {
    setCount((prev) => prev + 1);
		if(count < 3) setAge((prev) => prev + 1);
  };

  return (
    <div>
      <div>안녕하십니까 전 {age}</div>
      <button onClick={handlClick}>누르면한살먹기</button>
      <div>{count}</div>
    </div>
  );
}

export default App;

button을 누르면 count와 age 에 +1이 되며, count가 3 이상이면 더이상 age값이 늘어나지

않게 해달라는 요구조건이 있다고 가정합시다.

하지만 button 을 눌러보면 age가 22에서 멈출줄 알았는데 23까지 증가하게 됩니다.

이유는 setState 는 비동기처럼 동작하기 때문에 setCount를 먼저 실행하는게 아닌

if(~~)의 로직이 먼저 실행되어서 age가 먼저 증가하고 그후 count가 증가되어 발생하는

현상입니다.

이를 해결하기 위해 useEffect 등으로 해결할수 있습니다.

import { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [age, setAge] = useState(20);

  useEffect(() => {
    if (count !== 0 && count < 3) setAge((prev) => prev + 1);
  }, [count]);

  const handlClick = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <div>안녕하십니까 전 {age}</div>
      <button onClick={handlClick}>누르면한살먹기</button>
      <div>{count}</div>
    </div>
  );
}

export default App;