ref는 언제 사용하고 state와 어떻게 다른가요?

이렇게 답해 보세요 (핵심 답변)

ref는 렌더 사이에 값을 유지하지만, ref.current 값을 바꿔도 재렌더를 일으키지 않는 변경 가능한 컨테이너입니다. 반면 state는 값이 바뀌면 다음 화면 계산을 요청하므로 화면에 표시되는 데이터에 사용합니다. 따라서 포커스 이동·스크롤 제어·크기 측정처럼 실제 DOM 노드에 명령형으로 접근해야 하거나, 타이머 ID·이전 값 기록처럼 화면 출력과 무관한 내부 값을 보관할 때 ref를 사용합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 화면에 보여야 하는 값인지(state), 화면 갱신 없이 유지하거나 DOM에 접근하기 위한 값인지(ref)가 두 도구를 나누는 명확한 기준입니다.
2. DOM 노드는 커밋 단계에서 연결되므로 ref.current를 통한 DOM 조작은 렌더 본문이 아니라 이벤트 핸들러나 Effect 안에서 수행해야 안전합니다.

면접에서 자주 하는 실수

화면에 표시할 데이터를 ref.current에만 저장하고 수정하면 값은 바뀌어도 리렌더링이 일어나지 않아 사용자 화면은 갱신되지 않습니다.