9.1.1 useImperativeHandle이란?
useImperativeHandle은 흔히 사용되지는 않지만 상위 컴포넌트가 하위 컴포넌트의 함수를 호출하거나 상위 컴포넌트에서 하위 컴포넌트의 상태값을 변경하고 싶을 때 사용되는 Hook입니다. useImperativeHandle은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 커스터마이징 할 수 있습니다. 이 Hook은 항상 ref와 함께 사용해야 하고 공식 문서에서는 forwardRef 와 함께 사용하게끔 설명되어 있습니다.
9.1.2 기본 구조
useImperativeHandle(ref, createHandle, [deps])
useImperativeHandle은 위와 같이 세 개의 인자를 받을 수 있습니다. 첫번째 인자는 프로퍼티를 부여할 ref입니다. 보통 forwardRef로 부모에게서 받아온 ref를 할당합니다. 두번째 인자는 createHandle로 객체를 리턴하는 함수를 할당합니다. 해당 객체에는 추가하고 싶은 프로퍼티를 정의할 수 있습니다. 세번째 인자는 [deps]로 필수가 아닌 선택적 인자이며 Hook이 재정의 되어야 하는 조건들을 할당합니다.
9.1.3 주의점
useImperativeHandle은 하위 컴포넌트가 주요한 상태나 로직을 가지고 있는 경우에 유용하게 사용할 수 있는 Hook입니다.
항상 그렇듯이, 대부분의 경우 ref를 사용한 명령형 코드는 피해야 합니다.
하지만 공식 문서에 기재되어 있듯이 선언형 프로그래밍인 React는 선언적으로 해결될 수 있는 문제에서는 명령형 프로그래밍인 ref를 사용하는 것을 권장하지 않기 때문에 useImperativeHandle Hook은 필요한 곳에서만 선별적으로 사용해야 합니다.