useImperativeHandle

 

🎯 useImperativeHandle은 무엇일까요?

**useImperativeHandle**은 부모 컴포넌트가 자식 컴포넌트의 특정 기능을 제어할 수 있도록 만드는 도구예요.

일반적으로 React에서는 부모가 자식을 제어할 때 props를 사용하잖아요?
그런데 때로는 자식 컴포넌트 내부의 특정 함수나 값을 부모가 직접 호출해야 할 때가 있어요.

이때 useImperativeHandle을 사용하면
부모가 자식의 특정 기능만 노출해서 사용할 수 있게 돼요.

 

📞 비유: 리모컨과 텔레비전

텔레비전을 상상해볼까요? 📺

• 텔레비전(자식 컴포넌트) 안에는 볼륨, 채널 변경, 전원 끄기 등 다양한 기능이 있어요.
• 그런데 **리모컨(부모 컴포넌트)**을 통해서는 볼륨 조절이나 전원 끄기 같은 특정 기능만 사용할 수 있어야 하죠.

React의 **useImperativeHandle**은 이런 리모컨 역할을 해요.
부모 컴포넌트가 자식의 모든 기능을 다 제어하는 게 아니라,
노출하고 싶은 기능만 선택해서 제어할 수 있게 돕는 거예요.

 

🛠️ 기본 예제: useImperativeHandle 사용하기

자, 이제 간단한 예제를 통해 useImperativeHandle이 어떻게 작동하는지 보여드릴게요.

1. 자식 컴포넌트에서 특정 기능을 노출하기

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

// 자식 컴포넌트
const ChildComponent = forwardRef((props, ref) => {
  // 내부에 있는 함수들
  const sayHello = () => alert("안녕하세요! 👋");
  const sayGoodbye = () => alert("안녕히 가세요! 👋");

  // 부모가 접근할 기능을 노출 (리모컨에 넣어줄 기능)
  useImperativeHandle(ref, () => ({
    sayHello,
  }));

  return <div>여기는 자식 컴포넌트입니다.</div>;
});

export default ChildComponent;

 

2. 부모 컴포넌트에서 자식의 기능을 호출하기

import React, { useRef } from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  const childRef = useRef(null); // 자식 컴포넌트를 참조할 ref 생성

  const handleClick = () => {
    childRef.current.sayHello(); // 자식 컴포넌트의 sayHello 함수 호출
  };

  return (
    <div>
      <h1>부모 컴포넌트</h1>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>자식 컴포넌트의 기능 실행하기</button>
    </div>
  );
}

export default ParentComponent;

 

🔍 코드에서 무슨 일이 일어날까요?

1. forwardRef
   • ChildComponent를 감싸서 부모 컴포넌트에서 ref를 전달할 수 있도록 해요.
2. useImperativeHandle
   • 자식 컴포넌트 내부에서 부모에게 노출하고 싶은 기능을 선택적으로 전달해요.
   • 위 예제에서는 sayHello만 부모가 사용할 수 있도록 노출했어요.
   • sayGoodbye는 노출되지 않으니까 부모가 직접 사용할 수 없어요.
3. ref를 통해 기능 호출
   • 부모 컴포넌트에서 childRef.current.sayHello()를 호출하면
     자식 컴포넌트의 sayHello 함수가 실행돼요.

 

🎮 어떤 상황에서 사용할까요?

**useImperativeHandle**은 이런 경우에 유용해요:

1. 자식 컴포넌트의 특정 기능만 부모에게 제공하고 싶을 때
   • 예를 들어, 모달창 열고 닫기, 포커스 이동하기 같은 기능들.
2. DOM 요소에 접근해야 할 때
   • input이나 button 요소에 직접 접근해서 포커스를 주는 경우.

 

🧩 예제: 버튼 클릭으로 input에 포커스 주기

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

const InputField = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focusInput: () => inputRef.current.focus(),
  }));

  return <input ref={inputRef} placeholder="여기에 입력하세요" />;
});

function App() {
  const inputFieldRef = useRef();

  const handleFocus = () => {
    inputFieldRef.current.focusInput();
  };

  return (
    <div>
      <InputField ref={inputFieldRef} />
      <button onClick={handleFocus}>입력창에 포커스 주기</button>
    </div>
  );
}

export default App;

 

설명:

• useImperativeHandle을 통해 focusInput이라는 기능만 부모에게 노출했어요.
• 버튼을 클릭하면 input에 포커스가 가도록 제어할 수 있죠.

 

🚀 정리하자면!

useImperativeHandle은 부모 컴포넌트가 자식 컴포넌트의 특정 기능만 사용할 수 있도록 도와주는 도구예요.
자식 컴포넌트 내부의 모든 내용을 노출하지 않고, 딱 필요한 부분만 전달하는 게 핵심이에요!