이전 상태에 의존하는 연속 업데이트를 정확하게 처리합니다.
React는 이벤트의 상태 업데이트를 모아 처리합니다. 다음 값이 이전 값에 의존하면 setter에 업데이터 함수를 전달해 대기열의 최신 값을 받습니다.
업데이터는 current를 변경하지 않고 다음 값을 반환하는 순수 함수여야 합니다.
항상 함께 바뀌는 상태가 많다면 객체나 reducer로 전이를 모델링합니다.
setCount(count+1)을 세 번 호출하면 같은 스냅샷을 사용해 3 증가하지 않을 수 있습니다.
로컬 프로젝트에서 확인해보세요한 번 클릭에 5가 증가하도록 바꾸세요.
import { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
function addThree() {
setCount((v) => v + 1);
setCount((v) => v + 1);
setCount((v) => v + 1);
}
return (
<main>
<h1>{count}</h1>
<button onClick={addThree}>3 증가</button>
</main>
);
}