React useImperativeHandle: 부모 자식 컴포넌트 간 데이터와 함수 전달

by

React 함수형 컴포넌트는 부모 컴포넌트와 자식 컴포넌트 간에 데이터와 함수를 주고받는 일이 일반적입니다. 이러한 데이터와 함수 전달은 React의 핵심 원리 중 하나입니다. 그 중에서도 useImperativeHandle 훅은 자식 컴포넌트가 부모 컴포넌트로부터 함수나 메서드를 노출하고 커스터마이징할 때 사용됩니다.


useImperativeHandle란?

useImperativeHandle은 React에서 자식 컴포넌트에서 부모 컴포넌트로 함수나 메서드를 노출하거나 커스터마이징할 때 사용되는 특별한 훅입니다. 이를 통해 부모 컴포넌트는 자식 컴포넌트 내부의 특정 함수나 메서드에 직접 접근할 수 있으며, 이를 활용하여 자식 컴포넌트의 인터페이스를 더 쉽게 조작하거나 노출할 수 있습니다.


사용 예시

아래 예시를 통해 useImperativeHandle의 사용 방법을 살펴봅시다.

자식 컴포넌트 구현

먼저 자식 컴포넌트를 구현합니다. 여기서는 input 요소에 포커스를 주는 함수를 부모 컴포넌트로 노출하겠습니다.

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

const ChildComponent = forwardRef((props, ref) => {
  const internalRef = useRef(null);

  // useImperativeHandle을 사용하여 부모 컴포넌트로 노출할 함수 정의
  useImperativeHandle(ref, () =>; ({
    // 외부에서 호출 가능한 함수 정의
    focusChild: () =>; {
      internalRef.current.focus();
    },
  }));

  return <input ref={internalRef} >;
});


부모 컴포넌트 구현

이제 위에서 만든 자식 컴포넌트를 사용하는 부모 컴포넌트를 구현합니다. 버튼을 클릭하면 자식 컴포넌트의 focusChild 함수를 호출하여 input 요소에 포커스를 맞춥니다.

import React, { useRef } from 'react';

function ParentComponent() {
  const childRef = useRef(null);

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

  return (
    <div>
      <ChildComponent ref={childRef} >
      <button onClick={handleClick}>자식 컴포넌트에 포커스</button>
    </div>
  );
}



결론

useImperativeHandle을 사용하면 부모 자식 컴포넌트 간에 데이터와 함수를 더 쉽게 전달하고 조작할 수 있습니다. 이를 활용하여 React 애플리케이션의 컴포넌트 간 효율적인 통신을 구현하세요.



Leave a Comment