221214 TIL(useImperativeHandler)

useImperativeHandle customizes the instance value that is exposed to parent components when using ref...
useImperativeHandle should be used with forwardRef:

useImperativeHandler은 거의 사용할 일도 없고 리액트 문서에서 사용을 지양하라는 훅이라 익숙하지 않다. 

(하지만 때로는 권장하지 않더라도 사용해야 할 때가 있고 그 때 다양하게 알고 있는 게 힘이 된다.)

 

여튼 이 훅은 설명만 보면 도통 무슨 말인지 알기 힘들다. 

ref를 사용할 때 부모의 컴포넌트에 노출되는 인스턴스 값을 커스텀하고 forwardRef와 함께 사용된다고 한다. 

 

우선 useRef와 fowardRef를 알아보자.

 

1. 특정 돔에 접근할 때 useRef라는 리액트 훅을 사용하여 간단하 DOM 조작할 수 있다.

2. 이때 자신의 컴포넌트가 아닌 부모가 자식의 DOM에 접근할 때 fowardRef를 사용할 있다(props명을 ref로 쓰지 않는다면 안써도 됨)

 

그렇다면 useImperativeHandler는 무엇인가? 

useImperativeHandler는 2번에서 자식 컴포넌트에서도 그 DOM요소에 접근하고 싶을 때 쓰는 훅이다.

const Child = forwardRef((props, ref)) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => inputRef.current);

  return (
    <div>
      ...
      <input ref={ref} />
    </div>
  )
})

 

useImperativeHandler 훅을 통해 부모에서 사용하는 ref를  input.current로 반환하는 것이다. 

즉 처음으로 돌아가서 공식 문서에서 정의된 "부모 컴포넌트에 노출되는 인스턴스 값을 커스텀 한다" 의 의미가 이것이다. 

 

장점은 ?

 

useImperativeHandler 훅을 사용해 인스턴스 값을 커스텀할 수 있는데 이때 사용처인 부모는 해당 커스텀의 구체적인 내용을 알 필요 없사용할 수 있다. 이때, 자식 컴포넌트의 상태나 로직을 isolate할 수 있다는 장점이 생긴다.

리액트에서는 일방향의 데이터 흐름을 가지는데 그것을 피하기위해 Redux나 Context API를 사용한다.

하지만 그 것들을 사용할 만큼의 일이 아닐 때 useImperativeHandler을 사용할 수도 있다.

상태나 로직을 자식 컴포넌트가 갖거 있고 부모 컴포넌트는 자식 컴포넌트에서 정의한 프로퍼티를 사용하기만 하면 된다.

 

어떨때 쓰이는가 ?

Ref를 이용하는 자체가 권장되는 사용은 아니지만 혹시나 라이브러리를 wrapping 할때, 혹은 부모에게 자식의 메서드를 넘겨야하는 상황이 발생 할때 useImperativeHandle 는 유용하게 사용할 곳이 많을 것 같다.

 

 

Ref)

1. [React] useImperativeHandle

2. https://kelly-kh-woo.medium.com/react-hook-useimperativehandle-89fee716d80

3. https://developer-alle.tistory.com/372