useImperativeHandle – 부모가 자식의 함수를 직접 호출하는 방법

 

 

안녕하세요 😊
React에서 일반적으로 부모 → 자식으로 props를 내려주어 동작을 제어합니다.
하지만 때때로 부모 컴포넌트가 자식 컴포넌트의 특정 함수나 값에 직접 접근해야 할 때가 있습니다.

이럴 때 사용하는 Hook이 **useImperativeHandle**입니다.

---

📍 1. 언제 필요한가?

• 자식 컴포넌트를 외부 API처럼 동작시키고 싶을 때
• 예: 부모에서 자식의 focus(), reset() 같은 메서드를 직접 호출
• Form, Modal, Canvas 컨트롤 등에서 자주 사용

---

📍 2. 기본 문법

useImperativeHandle(ref, createHandle, [deps]);

• ref: 부모로부터 전달받은 ref 객체
• createHandle: 부모가 접근할 수 있도록 노출할 속성과 메서드 정의
• deps: 의존성 배열

---

📍 3. 간단 예제 – input focus 제어

Child.js

 

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

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

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

  return <input ref={inputRef} placeholder="이름 입력" />;
});

export default Child;

 

Parent.js

 

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

export default function Parent() {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.focus()}>
        자식 Input 포커스
      </button>
    </div>
  );
}

 

📌 부모가 자식의 focus() 메서드를 직접 호출

---

📍 4. 의존성 배열 사용

• 자식 내부 상태나 props가 변하면, 부모가 접근하는 API도 업데이트 가능

useImperativeHandle(ref, () => ({
  getValue: () => value
}), [value]);

---

📍 5. 사용 시 주의점

• 남용 금지: 일반적인 데이터 흐름(props)로 해결 가능한 경우엔 useImperativeHandle 대신 props 사용
• 꼭 필요한 경우(포커스 제어, 외부 라이브러리 래핑 등)만 사용
• 반드시 forwardRef와 함께 사용해야 부모가 ref를 전달 가능

---

✅ 마무리

useImperativeHandle은 부모가 자식의 메서드에 직접 접근할 수 있게 해주는 React의 비밀 통로입니다.
UI 컨트롤, 포커스, 외부 API 래핑 등에 매우 유용하지만,
필요할 때만 사용해야 React의 단방향 데이터 흐름을 유지할 수 있습니다.