React forwardRef와 useImperativeHandle

forwardRef

개념

부모 컴포넌트에서 자식 컴포넌트로 ref를 전달할 수 있게 해주는 React 기능입니다.

 

기본적인 사용법

// ref를 props로 받으로면 컴포넌트 함수를 forwardRef로 감싸야 합니다.
const ChildComponent = forwardRef((props, ref) => {
  return <div ref={ref}>...</div>
})

function ParentComponent() {
  const childRef = useRef(null)
  // 속성명 ref로 props를 넘겨줍니다.
  return <ChildComponent ref={childRef} />
}

 

주요 사용 사례

• 폼 요소 제어 (포커스, 값 검증)
• 애니메이션 제어
• 스크롤 위치 조작
• 미디어 요소 제어 (비디오/오디오 플레이어)

useImperativeHandle

개념

부모에게서 넘겨받은 ref를 원하는대로 수정할 수 있는 훅입니다.

const Input = forwardRef((props, ref) => {
  // useImperativeHandle을 사용하여 ref의 동작을 추가로 정의
  useImperativeHandle(
    ref,
    () => ({
      alert: () => alert(props.value),
    }),
    // useEffect의 deps와 같다
    [props.value],
  )
  return <input ref={ref} {...props} />
})

// 수정된 ref의 사용
function handleClick() {
    // inputRef에 추가한 alert라는 동작을 사용
    inputRef.current.alert()
}

 

 

 

 

 

 

 

[참고자료]

모던 리액트 Deep Dive