[리액트 딥다이브] useImperativeHandle

이름이 굉장히 생소한 처음 보는 hook이었던 useImperativeHandle..!

책에서도 이 훅은 실제로는 잘 쓰이지 않는다고 설명하고 있다.

그럼에도 유용하게 사용 가능한 경우가 있는데, useRef와 관련지어 생각하면 이해가 편하다.

 

먼저 forwardRef에 대해 살펴보자.

 

React.forwardRef

useRef에서 반환한 객체인 `ref`는 상위 컴포넌트에서 하위 컴포넌트로 직접 props로 넣어 전달하는 것이 불가하다.

따라서 예약어로 지정되어 있는 ref 대신 다른 이름을 붙여 전달하면 되는데, 네이밍이 계속 달라지게 되니 일관성이 부족하고 어떤 값을 전달하고 있는 것인지 그 의미가 잘 와닿지 않는다. 이를 위해 사용하는 것이 forwardRef다.

const ChildComponent = forwardRef((props, ref) => {
 useEffect(() =› {
/ {current: undefined}
/ / {current: HTMLInputElement} console.log(ref)
}, [ref])

 return ‹div>안녕!</div> })
 
function ParentComponent () {
const inputRef = useRef()

return (
	<>
    // 이렇게 ref라는 네이밍을 유지하면서 일관성 있게 props 전달이 가능하다!
        <input ref={inputRef} /›
        <ChildComponent ref={inputRef} /› 
	</>
   )
}

 

React.useImperativeHandle

이 훅은 부모에게서 전달 받은 ref의 값을 원하는 값/액션을 정의해 수정할 수 있는 훅이다.

원래의 ref는 HTMLElement만 주입 가능한 객체였지만, useImperativeHandle을 사용하면 추가적인 동작을 가능하게 할 수 있다.

즉, 부모 컴포넌트는 자식 컴포넌트의 새 객체의 키와 값에도 접근 가능하게 되었다.

 

간단한 사용법 예제는 아래와 같다.

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