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