useState는 함수 컴포넌트에 로컬한 반응형 state를 제공합니다. 이는 쌍을 반환합니다: 현재 값과 setter 함수입니다. setter를 호출하면 새 값으로 re-render가 예약됩니다.
jsx
const [count, setCount] = useState(0); // 0은 초기값
setCount(count + 1); // 값 형태
setCount(c => c + 1); // 함수형 형태 (이전 값에 기반할 때 권장)
초보자가 놀라는 두 가지
1. 업데이트는 비동기적이며 일괄 처리됩니다. count는 setCount 다음 줄에서 바뀌지 않습니다. 다음 render에서 새 값을 갖게 됩니다. 그래서 이것은 한 번만 증가합니다:
jsx
setCount(count + 1);
setCount(count + 1); // 둘 다 동일한 오래된 `count`를 읽음 → 총 +1
다음 값이 이전 값에 의존할 때는 함수형 업데이터를 사용하세요. React가 최신 값을 전달하기 때문입니다:
jsx
setCount(c => c + 1);
setCount(c => c + 1); // 총 +2 — 각자 최신 값을 받음
2. 초기값은 첫 render에서만 사용됩니다. 비용이 큰 기본값의 경우, 함수를 전달하여 한 번만 실행되도록 하세요(lazy init):
jsx
const [data] = useState(() => expensiveInit()); // 매 render가 아니라 한 번만 실행
왜 중요한가
state는 컴포넌트를 인터랙티브하게 만드는 요소입니다 — state가 변경될 때마다 React는 함수를 다시 실행하고 UI를 re-render합니다.
state를 **불변(immutable)**으로 다루세요: 변경하는 대신 새 배열/객체를 생성하세요. 예: setItems([...items, x]). 그렇지 않으면 React가 변경을 감지하지 못할 수 있습니다.