01. useState: 상태의 본질과 렌더링 엔진
React
Hook
State
리액트 상태 관리의 근본 원리를 체득하고, 7가지 실무 패턴으로 렌더링 엔진을 완전히 지배하라.
상태(State)란 무엇인가: UI와 데이터의 선언적 연결
무엇인가:
컴포넌트 내부에서 유지되는 동적인 데이터이자, 리액트가 화면을 다시 그리게 만드는 핵심 트리거. 일반 변수와 달리 useState로 선언된 값은 변경 시 해당 컴포넌트의 리렌더링을 보장한다.
왜 쓰는가: 직접적인 DOM 조작 없이 "데이터 변화 = 화면 변화"라는 선언적 UI를 실현하기 위해. 리액트는 상태를 스냅샷으로 다루며, 불변성(Immutability)을 지킨 업데이트만이 올바른 리렌더링을 보장한다.
언제 쓰는가:
사용자 입력, 서버 응답 등 화면에 즉각 반영되어야 하는 가변 데이터가 있을 때. 단, 렌더링에 영향을 주지 않는 값은 useRef를 고려하라.
1관문. Stale Closure
빠르게 클릭해도 카운터가 정확히 올라가도록 Stale Closure 함정을 제거하라.
2관문. Batching Mechanism
여러 setState가 단 한 번의 리렌더로 묶이는 원리를 파악하고, flushSync로 강제 즉시 렌더를 실험하라.
3관문. Lazy Initialization
컴포넌트가 마운트될 때만 초기값 계산 함수를 실행하도록 Lazy Initialization을 적용하라.
4관문. Derived State
Props에서 파생 가능한 값을 State로 복제하는 안티패턴을 제거하고 SSOT를 실현하라.
5관문. Object Identity
중첩 객체를 불변성을 지키며 업데이트하고, Immer 패턴의 편의성을 체험하라.
6관문. State Colocation
불필요하게 상위로 올라간 상태를 가장 가까운 컴포넌트로 내려서 렌더링 범위를 최소화하라.
7관문. Transition API
무거운 필터링 연산을 startTransition으로 비긴급 처리하여 입력 응답성을 유지하라.