useImperativeHandle

상위 컴포넌트에서 하위 컴포넌트의 height 값을 동적으로 구할 필요가 생김.
 
useImperativeHandle 와 forwardRef를 활용하여 하위 컴포넌트의 height 값을 동적으로 구할 수 있다.
 

useImperativeHandle 란?

상위 컴포넌트가 하위 컴포넌트의 특정 함수나 값을 호출할 수 있도록 인터페이스를 제공하는데 사용된다.
주로  ref를 전달하는 방식과 함께 사용되며, 부모 컴포넌트가 자식 컴포넌트의 내부 메서드나 값을 제어할 수 있게 만든다.

[사용 목적]
부모 컴포넌트에서 자식 컴포넌트의 특정 메서드나 속성에 접근하고자 할 때.
자식 컴포넌트의 내부 상태나 메서드를 외부로 노출할 때.

[사용 방법]
1. 하위 컴포넌트에서 forwardRef를 사용해 컴포넌트를 생성
2. useImperativeHandle 훅을 사용해 상위 컴포넌트로 노출할 메서드나 값을 정의
3. 상위 컴포넌트에서 ref를 사용해 하위 컴포넌트를 참조
 
하위 컴포넌트

const ChildComponent = forwardRef<ChildComponentHandle, ChildComponentProps>((props, ref) => {
  const childRef = useRef<HTMLDivElement>(null); //실제 하위 컴포넌트의 DOM 요소를 참조하는 ref

  //상위 컴포넌트로 노출할 메소드 정의
  //컴포넌트의 높이 값을 return
  useImperativeHandle(ref, () => ({
    getHeight: () => {
      return childRef.current?.offsetHeight || 0;
    }
  }));

  return (
    <div ref={childRef}>
      <p>이것은 하위 컴포넌트입니다.</p>
    </div>
  );
});

export default ChildComponent;

 
 
 
상위 컴포넌트

import React, { useRef, useEffect } from 'react';
import ChildComponent, { ChildComponentHandle } from './ChildComponent';

const ParentComponent: React.FC = () => {
  const childRef = useRef<ChildComponentHandle>(null); //하위 컴포넌트의 메소드를 전달 받는 ref

  useEffect(() => {
    if (childRef.current) {
      const height = childRef.current.getHeight();
      console.log('하위 컴포넌트의 높이:', height);
    }
  }, []);

  return (
    <div>
      <h1>상위 컴포넌트</h1>
      <ChildComponent ref={childRef} />
    </div>
  );
};

export default ParentComponent;