03. useRef & DOM: 탈출구와 명령적 제어

React

Hook

DOM

렌더링 궤도를 벗어난 ref의 두 얼굴을 이해하고, 7가지 패턴으로 명령적 제어를 완전히 장악하라.

레퍼런스(Reference)의 철학: 렌더링 궤도를 벗어난 영속적 기억

무엇인가: 리렌더링을 유발하지 않으며 컴포넌트 생애주기 동안 유지되는 가변 저장소. useRef는 두 가지 얼굴을 가진다: DOM 노드 직접 접근과 렌더링 외부 가변 값 저장.

왜 쓰는가: 화면 갱신 없이 값만 유지하거나, 리액트의 추상화를 뚫고 직접 DOM을 제어하기 위해. 렌더링 사이클에 묶이지 않아야 하는 값에 useState를 쓰는 것은 과잉이다.

언제 쓰는가: 이전 값 저장, 타이머 ID 관리, 포커스/스크롤 제어 등 비반응형 데이터 관리 시. DOM 조작은 반드시 useEffect 내에서만 수행하라.