React 부모 컴포넌트에서 자식 컴포넌트 함수 호출하기 - useImperativeHandle

React 에서 props 의 개념에 대해 익숙해졌다면, 부모 컴포넌트의 state 와 함수를 가져다 쓰는 것이 어렵지 않을 것이다. 그러나 만약 자식 컴포넌트의 함수를 부모 컴포넌트에서 사용해야 한다면 어떻게 할까? 자식 컴포넌트의 함수를 부모 컴포넌트로 옮기거나, 자식 컴포넌트와 부모 컴포넌트 최상단에 함수를 선언하거나, 커스텀 Hook 을 만들 수도 있을 것이다. 만약 정말 자식 컴포넌트에서 부모 컴포넌트로의 역방향 흐름을 만들어야 할 경우에는 리액트에서 제공하는 Hook 을 이용할 수 있다. 

useImperativeHandle

useImperativeHandle 은 자식 컴포넌트에 ref 를 선언하여 자식 컴포넌트 내부에 접근을 가능하게 해주는 방법이다. 자식 컴포넌트를 forwardRef로 감싸고 그 내부에 useImperativeHandle 을 이용해서 부모 컴포넌트로 내보내고 싶은 함수를 선언해준다.

/* 참고 */

React 공식 문서에서는 ref 를 사용한 명령형 코드를 지양하라고 권고한다. 이유는 리액트는 상태 값의 변화에 따라 재렌더링을 일으키도록 설계되어 있는데, ref와 state 모두 리액트 문서 내에서 상태 값을 가지고 있는 것들이기 때문이다. state 가 변경되면 재렌더링을 일으키지만, ref는 변경되어도 재렌더링을 일으키지 않는다. 그러나 ref의 상태를 변경할 경우 상태 변화를 감지하는 React의 성능을 저하시키거나 오류를 일으킬 수 있기 때문에 대부분의 경우 ref 를 이용한 코드를 지양하라고 권장한다.

Hooks API Reference – React

 

useImperativeHandle을 이용한 코드는 아래와 같다.

import { forwardRef, useEffect, useImperativeHandle, useRef } from "react"

// 부모 컴포넌트
const ParentComponent = () => {
  const childComponentRef = useRef();

  useEffect(() => {
    childComponentRef.current.willBeUsedInParentComponent();
  }, []);

  return (
    <ChildComponent ref={childComponentRef} />
  )
};

// 자식 컴포넌트
const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    // 부모 컴포넌트에서 사용할 함수를 선언
    willBeUsedInParentComponent
  }))

  function willBeUsedInParentComponent() {
    console.log('Hi Parent');
  }

  return (
    <div></div>
  )
});

export default ParentComponent;

결과 화면