훅 사용법을 외워 왔는지, 아니면 "리렌더 여부"라는 기준으로 useState와 useRef를 가르는 감각이 있는지를 가른다.
useRef는 current 프로퍼티에 값을 들고 있는 훅이고, 그 값이 바뀌어도 컴포넌트를 다시 렌더링하지 않는다. 그래서 두 가지 자리에 쓴다 — 첫째, DOM 노드에 직접 접근해야 할 때(input focus, scroll 위치, 외부 라이브러리 인스턴스 잡기). 둘째, 렌더링은 트리거하지 말아야 하지만 값은 보존해야 할 때(setInterval 핸들, 직전 prop, 외부 옵저버). 반대로 화면에 보여 줘야 하는 값은 useState를 써야 한다 — ref를 상태 대신 쓰면 값은 바뀌었는데 화면이 안 갱신되는 사고가 따라온다. 한 줄 기준 — "이 값이 바뀔 때 화면을 다시 그려야 하는가?" 그렇다면 state, 아니면 ref.
useState로 들고 있다 의미 없는 리렌더가 누적된 값을 useRef로 옮긴 경험이 있다면 "렌더 트리거 여부" 기준 사례로 풀어낼 수 있다
input 자동 포커스·외부 imperative API 연동을 다뤄 본 경험이 있다면 DOM 참조 사용 패턴으로 보여 줄 수 있다
ref를 상태 대용으로 쓰다 화면이 안 갱신된 버그를 추적한 경험이 있다면 "화면을 결정하는 값과 그렇지 않은 값"의 경계 이야기로 일반화할 수 있다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.