[React] 부모 컴포넌트에서 자식 컴포넌트의 함수 사용하기

자식 컴포넌트에서 부모 컴포넌트의 함수를 사용하는 것은 쉽습니다.

부모 컴포넌트의 함수를 자식 컴포넌트의 props로 전달해주면 되기 때문입니다.

 

하지만, 반대로 부모 컴포넌트에서 자식 컴포넌트의 함수를 사용하는 방법은 어떤 것이 있을까요?

 

대표적으로, useImperativeHandle과 forwardRef를 이용하는 방법이 있습니다.

 

---

 

부모 컴포넌트에 있는 button 태그를 클릭했을 때, 자식 컴포넌트에 있는 addNumber 함수를 호출해보려고 합니다.

 

이 addNumber 함수는 자식 컴포넌트 내부에 있는 number 이라는 상태 변수를 1씩 증가시킵니다.

 

---

먼저, 자식 컴포넌트입니다.

 

// type
export type addNumberHandle = {
  addNumber: () => void;
};

// forwardRef를 이용하여 자식 컴포넌트 생성
export const Child = forwardRef<addNumberHandle>((props, ref) => {
  const [number, setNumber] = useState(0);

  // 이 함수는 부모 컴포넌트가 참조하여 사용 가능
  const addNumber = () => {
    setNumber((prev) => prev + 1);
  };

  // 부모 컴포넌트에서 사용할 수 있는 함수들을 내부에 표기
  useImperativeHandle(ref, () => ({
    addNumber
  }));

  return <div>{`Click ${number} times!`}</div>;
});

 

부모 컴포넌트가 자식 컴포넌트의 addNumber 함수를 사용할 수 있게끔 구현해놓았습니다.

 

---

다음은, 부모 컴포넌트입니다.

 

import { addNumberHandle, Child } from './Child';

// 부모의 컴포넌트
const Parent = () => {
  const addNumberRef = useRef<addNumberHandle>(null);

  return (
    <>
      <button
        onClick={() => {
          addNumberRef?.current?.addNumber();
        }}
      >
        click this button!
      </button>
      <Child ref={addNumberRef}></Child>
    </>
  );
};

 

<button> 태그를 클릭했을 때 자식 컴포넌트에 걸어놓은 ref를 이용하여 자식 컴포넌트를 참조하게 되고,

내부의 addNumber 함수를 호출할 수 있게 됩니다.

 

---

구현 결과

---

부모 컴포넌트에서 자식 컴포넌트의 함수를 사용하려고 할 때는 useImperativeHandle과 forwardRef를 이용할 수 있습니다.