컴포넌트가 렌더 사이에 기억할 값을 state로 관리합니다.
useState는 현재 렌더의 값과 다음 렌더를 요청하는 setter를 반환합니다. setter 직후 현재 함수의 값은 바뀌지 않으며 각 렌더는 자신의 스냅샷을 봅니다.
화면에 영향을 주고 렌더 사이에 유지되어야 하는 값만 state로 둡니다.
객체와 배열은 직접 수정하지 않고 새 값으로 교체합니다.
지역 변수는 재렌더 때 초기화되고 바꿔도 렌더를 요청하지 않습니다.
로컬 프로젝트에서 확인해보세요값이 0 아래로 내려가지 않는 감소 버튼을 추가하세요.
import { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
return (
<main>
<h1>완료 {count}개</h1>
<button onClick={() => setCount(count + 1)}>완료 추가</button>
</main>
);
}