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

1. 개요

부모 컴포넌트에서 자식 컴포넌트의 함수를 호출하려면 다음 두가지를 알아야 한다

 

• forwadRef : 자식 컴포넌트의 요소에 대해 ref를 따는 API
• useImperativeHandle : 자식 컴포넌트의 여러 요소를 부모에게 노출시키는 hook. 여러개의 요소를 오브젝트의 형태로 담아 부모에게 전달 할 수 있다.

 

위 두가지는 서로 짝짝쿵이며 이에 대한 설명은 아래 글에 간단하게 적어놨다.

 

 

(링크타기 부담스러우신분들은 안타도 충분히 위 두줄로 이해 되니깐 그냥 패스하세용)

 

 

[React] forwardRef, useImperativeHandle에 대한 이해

 

 

 

 

 

2. 예제

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

const Child = forwardRef((props, ref) => {
  const childFunction = () => {console.log("hello, 붕어!")}
  useImperativeHandle(ref, () => ({
    giveMeFunction : childFunction
  }));
  
  return (
    <div>자식 컴포넌트</div>
    );
}


function Parent() {

  const ref = useRef();
  
  function parentFunction(){
    ref.current.giveMeFunction();
  }
  
  return (
    <div>
      <Child ref= { ref } />
      <button onClick={parentFunction}/>
    </div>
    );
}

 

예제에 대한 설명은 다음과 같습니다.

 

1. 자식 컴포넌트를 forwardRef API를 사용하여 만들어줍니다.

2. useImperativeHandle는 부모에게 전달해줄 데이터를 오브젝트 형태로 담아, 부모에게서 넘어오는 ref에 매칭해줍니다.

3. 부모 컴포넌트에서는 useRef로 ref를 생성하여 자식에게 ref를 내려줍니다.

4. ref.current를 통하여 자식에게 전달받은 오브젝트를 사용하여 함수를 호출합니다.

 

쉽쥬?