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

Why use?

• 자식 컴포넌트에서 이벤트를 발생시키지 않고 부모 컴포넌트에서 이벤트를 발생시켜서 자식 컴포넌트의 이벤트를 발생시켜서 데이터를 가져오려면 어떻게 해야할까?
• 부모 컴포넌트에서 ref를 만들어서 자식 컴포넌트에게 props로 넘겨주면 되지 않을까?
• 하지만 리액트에서 특수한 prop인 key와 ref는 자식 컴포넌트에게 props로 넘겨줄 수가 없다.
• 이를 위해서는 몇 가지 hooks가 필요하다.

React.forwardRef

• 리액트에서 특수한 props인 key와 ref는 자식 컴포넌트에게 props로 넘겨줄 수가 없다.
• HTML 엘리먼트가 아닌 React 컴포넌트에서 ref prop을 사용하려면 React에서 제공하는 forwardRef()라는 함수를 사용해야 한다.
• React 컴포넌트를 forwardRef()라는 함수로 감싸주면, 해당 컴포넌트는 함수는 두 번째 매개 변수를 갖게 되는데, 이를 통해 부모 컴포넌트에서 ref prop을 넘길 수 있다.

React.useImperativeHandle

• 이 훅은 ref를 사용하는 부모 측에서 자식 컴포넌트에서 정의한 메서드를 사용할 수 있게 해준다.
• useImperativeHandle() 의 첫 번째 인자로는 프로퍼티를 부여할 ref이고, 두 번째 인자는 부모에서 호출할 자식의 함수이다.

 

예시)

App.js

// App.js
import React, { useRef } from "react";
import Child from "./Child";

export default function App() {
  const childRef = useRef();
  return (
    <div className="App">
      <button
        onClick={() => {
          childRef.current.showAlert();
        }}
      >
        버튼 눌러
      </button>
      <Child ref={childRef}></Child>
    </div>
  );
}

Child.js

// Child.js
import React, { forwardRef, useImperativeHandle } from "react";

const Child = forwardRef((props, ref) => {
  // 여기서 ref는 Child 컴포넌트!
  useImperativeHandle(ref, () => ({
    showAlert() {
      alert("hi");
    }
  }));

  return <div>자식</div>;
});

export default Child;