React에서 setState가 지연되는 이유

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *초보 React 개발자**

- 난이도: 중간 (React의 상태 관리 및 성능 최적화 개념 이해 필요)

핵심 요약

• React는 상태 업데이트를 배치(batch)하여 성능 최적화
• setState 호출 후 즉시 상태가 업데이트되지 않고, 다음 렌더링 시점에 반영
• 함수형 업데이트(예: prev => prev + 1) 또는 useEffect`를 사용해 상태 변화에 반응해야 함
• 렌더링 시점에서만 상태 값이 실제 변경됨

섹션별 세부 요약

1. setState의 지연 현상

• setState 호출 후 console.log로 상태 값을 확인하면 기존 값이 출력됨
• 상태 업데이트는 비동기 방식으로 처리되어 즉시 반영되지 않음
• 예: setCount(prev => prev + 1); console.log(count); → count는 여전히 1로 유지

2. React의 상태 업데이트 메커니즘

• React는 이벤트 핸들러 내부의 상태 업데이트를 쿼리 시스템에 저장 후, 핸들러 종료 후 한 번에 처리
• 여러 상태 업데이트를 단일 렌더링에 통합하여 불필요한 렌더링을 줄임
• 예: 3개의 setCount 호출 → 1회만 렌더링

3. 상태 업데이트의 비동기 처리

• 상태 업데이트는 렌더링 시점에만 반영되며, 즉시 사용 불가
• 예: const updatedCount = count + 1; → count는 여전히 기존 값 유지

4. 대안 및 해결 방법

• 함수형 업데이트 사용: setCount(prev => prev + 1)
• useEffect 사용: 상태 변화 후 실행해야 하는 로직을 useEffect에 배치
• 상태 값이 필요할 경우, 렌더링 시점에서 직접 접근

결론

• React의 setState는 성능 최적화를 위해 비동기 처리되며, 렌더링 시점에만 상태가 업데이트됨
• 즉시 상태 값을 사용해야 할 경우, 함수형 업데이트 또는 useEffect를 활용
• 렌더링 시점에서 상태를 확인해야 실제 값이 반영됨