[React,Next] forwardRef사용하기 ( 개인기록 )

목차

 forwardRef는 무엇인가?

'forwardRef'는 React에서 부모 컴포넌트가 자식 컴포넌트의 DOM 요소 또는 클래스 인스턴스에 'ref'를 전달할 수 있도록 해주는 고차 함수이다.

기본적으로 'ref'는 부모 컴포넌트가 자식 컴포넌트의 특정 DOM 요소에 접근할 수 있게 한다.

하지만 일반적인 컴포넌트에서는 'ref'를 직접 전달할 수 없기 때문에 'forwardRef'를 사용하여 문제를 해결해야한다.

 

 왜 'forwardRef'를 사용해야 하는가?

React컴포넌트는 기본적으로 'ref'를 직접 전달받을 수 없다. 하지만 'forwaredRef'를 사용하면 부모 컴포넌트가 자식 컴포넌트의 특정 DOM 요소에 접근할 수 있게 된다.

 

이는 다음과 같은 경우에 유용하다.

1. DOM 조작 : 특정 DOM 요소에 대해 직접 조작을 해야 할 때
2. 외부 라이브러리 통합 : 외부 라이브러리와 통합 시, 해당 라이브러리에서 요구하는 특정 DOM 요소를 참조 해야 할 때
3. 컴포넌트 라이브러리 : 재사용 가능한 컴포넌트 라이브러리를 작성할 때, 사용자에게 더 많은 제어권을 제공하기 위해

 사용법

기본 사용법

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

// 자식 컴포넌트
const ChildComponent = forwardRef((props, ref) => (
  <div ref={ref}>
    I'm a child component
  </div>
));

// 부모 컴포넌트
const ParentComponent = () => {
  const childRef = useRef(null);

  const handleClick = () => {
    if (childRef.current) {
      childRef.current.style.backgroundColor = 'blue';
    }
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Change Color</button>
    </div>
  );
};

export default ParentComponent;

 

부모 컴포넌트가 자식 컴포넌트의 특정 메소드를 호출하려면?

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

// 자식 컴포넌트
const ChildComponent = forwardRef((props, ref) => {
  const localRef = useRef(null);

  useImperativeHandle(ref, () => ({
    scrollIntoView: () => {
      localRef.current.scrollIntoView({ behavior: 'smooth' });
    },
  }));

  return (
    <div ref={localRef} style={{ backgroundColor: 'lightgray', height: '300px', margin: '10px 0' }}>
      I'm a child component
    </div>
  );
});

// 부모 컴포넌트
const ParentComponent = () => {
  const childRef = useRef(null);

  const handleScroll = () => {
    if (childRef.current) {
      childRef.current.scrollIntoView();
    }
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleScroll}>Scroll to Child</button>
    </div>
  );
};

export default ParentComponent;

• 'useImperativeHandle'은 'forwardRef'와 함께 사용되어 부모 컴포넌트가 자식 컴포넌트의 특정 메서드를 호출할 수 있게 한다.
• 이를 통해 부모 컴포너늩가 자식 컴포넌트의 내부 기능을 제어할 수 있게 된다.

 마치며

'forwardRef'와 'useImperativeHandle'을 적절히 사용하면, React 컴포넌트 간의 복잡한 상호작용을 더 쉽게 관리할 수 있다.

특히, 재사용 가능한 컴포넌트를 작성할 때 매우 유용하다.