react에서 상태를 변경할때 setState 에 변경로직을 바로 넣어서 사용하는 경우와, 이전상태를 불러와 콜백

형태로 넘겨서 사용하는 경우가 있습니다.

import { useState } from "react";

function App() {
  const [age, setAge] = useState(28);

  const updateState = () => {
    setAge(age + 1); //29
    setAge(age + 1); //29
    setAge(age + 1); //29
  };

  const updaterState = () => {
    setAge((prevAge) => prevAge + 1); //29
    setAge((prevAge) => prevAge + 1); //30
    setAge((prevAge) => prevAge + 1); //31
  };

  return <div></div>;
}

export default App;

위 코드에서 updateState 함수는 setState 로직을 바로 사용하면 비동기적 처리 때문에 age의 기본값인

28이라는 수를 가르켜 원래 원하던 대로 상태가 변경되지 않습니다.

이를 방지하기위해 updateState 함수처럼 setState 내부에서 콜백으로 이전 상태를 가져올수 있습니다.

따라서 setState함수를 사용할 때에는 이전 상태를 불러와서 상태 변경을 하는것이 에러를 방지할수 있습니다.