[React] 상위 컴포넌트에서 하위 컴포넌트의 함수 호출하기

참고 : https://medium.com/@nugen/react-hooks-calling-child-component-function-from-parent-component-4ea249d00740

React Hooks-Calling Child Component Function From Parent Component

 

[ 상위 컴포넌트 ]

import React, { useRef } from "react";

const ParenctComponent = () => {
  const myRef = useRef({});
  
  function doSomething(){
    myRef.current.functionWhichParentNeed();
  }

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

export default ParenctComponent;

hook인 useRef를 통하여 자식 컴포넌트의 DOM에 접근할 수 있는 ref 를 얻는다.

 

 

[ 하위 컴포넌트 ]

import React, {forwardRef,useImperativeHandle} from "react";

const ChildComponent = forwardRef((props, ref) => {
  function functionWhichParentNeed() {
  	//함수 작성
  }

  useImperativeHandle(ref, () => ({
    // 부모에서 사용하고 싶었던 함수
    functionWhichParentNeed,
  }));

  ...
});

export default ChildComponent;

 

1. forwardRef와 useImperativeHandle 를 import 한다.

2. 자식 컴포넌트를 forwardRef로 감싸므로써 인자로 props와 ref를 받을 수 있다.

3. useImperativeHandle : 부모에게 노출될 인스턴스의 값을 정의할 수 있다.

  함수의 첫 번째 parameter는 ref, 두 번째 parameter는 ref를 활용하여 접근할 함수를 넘겨준다.