1. useState 복습

useState는 컴포넌트에 상태(state)를 추가하는 Hook입니다. 상태가 변경되면 React는 자동으로 컴포넌트를 다시 렌더링합니다.

const [상태값, 상태변경함수] = useState(초기값);

2. useState 동작 순서

useState가 어떤 순서로 동작하는지 시각화해보겠습니다.

2.1 단계별 흐름

핵심 포인트:

• setCount(1) 호출 시 즉시 값이 바뀌지 않음
• React가 상태 변경을 예약하고, 컴포넌트를 다시 실행
• 재실행 시 useState가 저장된 새 값을 반환

3. 함수형 업데이트

이전 상태를 기반으로 새 상태를 계산할 때는 함수형 업데이트를 사용합니다.

// 연속 호출 시 함수형 업데이트 권장
setCount((prev) => prev + 1);

4. 다음 Hook과의 연결

useState로 상태를 관리하면, 자연스럽게 다음 질문이 생깁니다:

• 상태가 변경될 때 특정 작업을 실행하려면? → useEffect
• 상태 변경 없이 값을 저장하려면? → useRef
• 복잡한 계산을 최적화하려면? → useMemo

다음 장에서 useEffect를 학습하며 상태 변화에 반응하는 방법을 알아보겠습니다.