Ref
Ref는 React가 렌더 사이에 유지해 주는 mutable한 보관 상자입니다. 이를 통해 실제 DOM 노드를 직접 가리키거나, 화면에 바로 반영될 필요가 없는 값을 기억할 수 있습니다.
▶아키텍처 다이어그램
🔗 관계 다이어그램점선 애니메이션은 데이터 또는 요청의 흐름 방향을 나타냅니다
모든 값을 state에 넣으면 필요하지 않은 재렌더가 늘고, focus 이동이나 스크롤 제어처럼 실제 DOM 노드에 명령해야 하는 작업은 state만으로 자연스럽게 표현하기 어렵습니다. 선언형 렌더링이 기본이더라도, 일부 작업은 여전히 명령형 접근을 필요로 합니다.
React는 가능한 한 UI를 선언형으로 다루게 만들었지만, 브라우저 API와 외부 라이브러리는 여전히 명령형 모델이 많습니다. 그래서 화면 계산과는 별도로 노드 참조나 mutable 값을 붙잡아 둘 통로가 필요했고, ref가 그 역할을 맡게 됐습니다.
useRef를 호출하면 current 프로퍼티를 가진 객체가 반환되고, 이 객체는 렌더가 반복돼도 같은 참조를 유지합니다. DOM 요소에 ref를 연결하면 React가 커밋 시점에 current에 실제 노드를 넣어 줍니다. 일반 값 저장에도 쓸 수 있지만, current를 바꾼다고 자동으로 화면이 다시 그려지지는 않습니다.
Ref와 state는 둘 다 값을 기억하지만 의도가 다릅니다. state는 화면을 다시 계산하기 위한 값이고, ref는 렌더에 참여하지 않는 값이나 DOM 참조를 위한 도구입니다. 또한 Virtual DOM이 React의 기본 갱신 경로라면, ref는 그 경로 밖에서 직접 다루는 예외 통로에 가깝습니다.
State
컴포넌트가 다음 렌더까지 기억해 두는 현재 값
state는 바뀌면 UI를 다시 계산하고, ref는 값을 기억해도 재렌더를 일으키지 않습니다. 화면 반영 필요 여부가 핵심 차이입니다.
Virtual DOM
이전과 다음 렌더 결과를 비교해 실제 DOM 갱신을 최소화하는 React의 내부 모델
Virtual DOM은 React의 선언형 기본 경로이고, ref는 그 경로 밖에서 DOM이나 mutable 값을 직접 다루는 탈출구입니다.
Controlled
입력 요소의 현재 값을 React state가 단일 기준으로 관리하는 패턴
controlled components는 입력값을 state로 통제하고, ref 기반 접근은 DOM이 들고 있는 현재 값을 필요할 때 직접 읽는 쪽에 가깝습니다.
실무에서는 input autofocus, 드래그 시작 좌표 보관, 이전 props 기억, 외부 차트 라이브러리 인스턴스 유지 같은 장면에서 ref가 자주 쓰입니다. 다만 ref를 state 대체품처럼 넓게 쓰기 시작하면 화면과 값이 어긋나기 쉬우므로, 렌더링에 영향을 줘야 하는 값인지부터 먼저 확인하는 습관이 중요합니다.