[Reactjs] useImperativeHandle를 사용하여 자식 컴포넌트 함수를 호출하는 방법

React.js는 코드 재사용을 촉진하고 깨끗하고 유지보수 가능한 웹 애플리케이션을 만드는 데 도움이 되는 컴포넌트 기반 아키텍처로 유명하다. 이 아키텍처의 중요한 측면 중 하나는 부모 및 자식 컴포넌트 간의 통신이다. 특정 훅인 useImperativeHandle은 React.js에서 자식 컴포넌트 함수 호출을 효율적으로 지원하는데 사용된다.

useImperativeHandle 시작하기

React의 useImperativeHandle 훅은 빈번하게 사용되지는 않지만 자식 컴포넌트의 특정 메서드를 부모 컴포넌트에 노출시키고자 할 때 필수로 사용된다.

다음은 useImperativeHandle을 활용하는 기본적인 예제이다

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

const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    helloWorld() {
      console.log("Hello World");
    }
  }));
  return <div></div>;
});

const ParentComponent = () => {
  const childRef = useRef();
  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={() => childRef.current.helloWorld()}>클릭</button>
    </div>
  );
};

export default ParentComponent;

useRef와 forwardRef의 역할

useImperativeHandle 사용에 있어서 두 가지 필수 요소는 useRef와 forwardRef이다. useRef는 부모 컴포넌트에서 자식 컴포넌트의 함수에 접근할 수 있게 해주며, forwardRef는 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달하는 기술이다.

아래 코드를 살펴보자:

const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    showAlert() {
      alert("이것은 ChildComponent에서의 경고입니다!");
    }
  }));
  return <div></div>;
});

const ParentComponent = () => {
  const childRef = useRef();
  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={() => childRef.current.showAlert()}>경고</button>
    </div>
  );
};

export default ParentComponent;

여기서 forwardRef는 ParentComponent에서 ChildComponent로 ref를 전달한다. 자식 컴포넌트는 이후 useImperativeHandle을 사용하여 전달된 ref에 showAlert 메서드를 추가한다.

useImperativeHandle은 부모 컴포넌트가 자식 컴포넌트의 함수를 직접 호출해야 하는 상황에 필수적인 도구이다. 빈번하게 사용되지는 않지만 이 작동 방식을 이해하는 것은 React 스킬을 향상시키고 더 유연하고 강력한 React 애플리케이션을 만드는 데 도움이 될 것이다.

자주 묻는 질문들

1. Reactjs에서 useImperativeHandle이란 무엇인가요? useImperativeHandle은 React 훅으로, 자식 컴포넌트에서 특정한 메서드를 부모 컴포넌트에 노출시키는 기능을 제공한다.
2. useImperativeHandle을 사용할 때 왜 useRef와 forwardRef가 필수인가요? useRef는 부모 컴포넌트에서 자식 컴포넌트의 함수에 접근할 수 있게 해주고, forwardRef는 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달하기 위한 기술이다.
3. Reactjs에서 useImperativeHandle은 일반적으로 자주 사용되나요? useImperativeHandle은 일반적으로 사용되지는 않지만, 부모 컴포넌트가 자식 컴포넌트의 함수를 직접 호출해야 하는 특정한 시나리오에서 유용하게 사용될 수 있다.
4. forwardRef 없이 useImperativeHandle을 사용할 수 있나요? 아니다, useImperativeHandle을 사용할 때에는 forwardRef가 필수적이며, 이를 통해 부모 컴포넌트가 자식 컴포넌트로 ref를 전달할 수 있다.
5. useImperativeHandle 대신 다른 것을 사용할 수 있나요? 상황에 따라 다른 React 훅인 useState, useContext, 또는 useReducer 등을 사용하여 컴포넌트 간 통신을 구현할 수 있지만, 이들은 useImperativeHandle을 직접 대체하는 것은 아니다.