custom 컴포넌트에 전달된 ref는 그 내부의 DOM 노드에 자동으로 도달하지 않습니다. **forwardRef**는 컴포넌트가 ref를 받아 자식 요소에 붙일 수 있게 해줍니다. **useImperativeHandle**은 그 ref가 무엇을 노출할지 커스터마이징합니다.
DOM 노드로 ref 전달하기
jsx
= ( () {
;
});
ref = ();
;
때로는 전체 DOM 노드를 노출하고 싶지 않고 — 특정 메서드만 노출하고 싶을 때가 있습니다:
const FancyInput = forwardRef(function FancyInput(props, ref) {
const inner = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => inner.current.focus(),
clear: () => { inner.current.value = ""; },
}), []);
return <input ref={inner} {...props} />;
});
// 부모: fancyRef.current.focus(); fancyRef.current.clear();
통신에는 props/state를 선호하세요. ref는 진정으로 명령형인 필요에만 사용하세요: 포커스 관리, 스크롤, 텍스트 선택, 미디어 재생, 또는 명령형 라이브러리 통합. 참고: React 19에서는 ref를 일반 prop으로 전달할 수 있으므로 forwardRef가 더 이상 필요하지 않은 경우가 많습니다.