[React] 부모 컴포넌트에서 자식 컴포넌트 참조하기 - forwardRef&useImparativeHandle 사용법

forwardRef표지

 

부모 컴포넌트에서 자식 컴포넌트 참조하기 - forwardRef & useImparativeHandle 사용법

 

1. forwardRef 란?

React의 ForwardRef는 개발자가 구성 요소를 통해 하위 요소 중 하나에 참조를 전달할 수 있는 강력하고 다재다능한 기능이다. React 16.3에 도입된 ForwardRef는 고차 구성 요소, 래퍼 구성 요소를 처리할 때 또는 하위 구성 요소의 인스턴스에 직접 접근해야 할 때 특히 유용하다. 

대부분의 경우 ref를 사용하는 것은 간단하지만, 고차 구성 요소나 래퍼 구성 요소를 통해 ref를 전달하려고 하면 문제가 발생한다. ForwardRef를 사용하면 상위 구성 요소의 참조를 하위 구성 요소로 전달할 수 있으므로 하위 인스턴스에 원활하게 접근할 수 있다.

---

2. fowrardRef 예제

import React, { forwardRef } from 'react';
import ChildComponent from './ChildComponent';

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

  return <ChildComponent ref={childRef} />;
};

// ChildComponent.js
const ChildComponent = forwardRef((props, ref) => {
  return <div ref={ref}>I am the child component!</div>;
});

export default ChildComponent;

 

1. ParentComponent: childRef라는 useRef를 사용하여 참조를 생성한다.
2. ChildComponent: 'forwardRef'를 사용하여 참조를 하위 구성 요소에 전달한다. 그런 다음 참조는 하위 구성 요소 내의 'div' 요소에 첨부된다.
3. 사용법: ParentComponent가 ChildComponent를 렌더링할 때 childRef를 prop으로 전달한다. 이를 통해 ParentComponent는 ChildComponent에 의해 렌더링된 DOM 요소에 접근하고 조작할 수 있다.

---

3. useImparativeHandle Hook으로 자식 컴포넌트에 직접 접근하기

useImperativeHandle 훅은 forwardRef와 함께 사용되는 React의 또 다른 고급 기능으로, ref를 사용할 때 노출되는 인스턴스 값을 사용자 정의할 수 있게 해준다. 이는 부모 컴포넌트에게 노출되는 컴포넌트 인스턴스의 특정 속성이나 메서드를 숨기고 싶을 때 특히 유용하다.

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

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

  // 이 훅을 사용하면 부모 컴포넌트에 노출될 ref 값을 사용자 정의할 수 있다
  useImperativeHandle(ref, () => ({
    // 필요한 메서드나 속성만 노출한다
    focus: () => {
      internalRef.current.focus();
    },
    getValue: () => {
      return internalRef.current.value;
    },
  }));

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

export default ChildComponent;

이 예제에서 ChildComponent는 간단한 입력 필드다. 그러나 useImperativeHandle을 사용하면 부모 컴포넌트에 노출되는 특정 메서드나 속성을 제한할 수 있다.

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

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

  useEffect(() => {
    // 노출된 메서드에 접근
    childRef.current.focus();
    const value = childRef.current.getValue();
    console.log('ChildComponent에서의 값:', value);
  }, []);

  return <ChildComponent ref={childRef} />;
};

export default ParentComponent;

ParentComponent에서 useEffect 훅은 ChildComponent에서 제공된 focus 및 getValue와 같은 노출된 메서드를 어떻게 사용하는지 보여준다.

1. ChildComponent: useImperativeHandle을 사용하여 부모 컴포넌트에 노출될 ref 값을 사용자 정의한다. 이 경우 focus와 getValue 메서드만 노출된다.
2. ParentComponent: ref인 childRef를 사용하여 ChildComponent에서 제공하는 focus 및 getValue와 같은 사용자 정의 메서드에 접근한다.

useImperativeHandle을 활용하면 부모와 자식 컴포넌트 간의 인터페이스를 더 깨끗하고 통제된 상태로 유지하며, 다른 내부 세부 사항은 숨길 수 있다. 특히 자식 컴포넌트의 구현 세부 사항을 캡슐화하고 싶은 경우에 유용하다.