[React 19] forwardRef 지원 중단에 따른 새로운 ref 전달 방법.

⚠️

리액트 19버전부터 적용됨.

목적

• 보일러 플레이트 코드 감소
• 아키텍처 간소화

배경

• react 19이전에는 ref를 클래스 컴포넌트와 DOM 요소에서만 사용할 수 있었음.
• 따라서, 함수형 컴포넌트에서는 ref를 받을수 없어서, forwardRef로 명시적으로 ref를 자식이나 DOM 노드에 전달했음.

비교

기존

import React, { forwardRef } from 'react';
 
const MyButton = forwardRef((props, ref) => (
  <button ref={ref} {...props}>
    {props.children}
  </button>
));
 
// 사용 예시
const App = () => {
  const buttonRef = React.useRef();
  return <MyButton ref={buttonRef}>Click Me</MyButton>;
};

변경 후

const MyButton = ({ ref, ...props }) => {
  return (
    <button ref={ref} {...props}>
      {props.children}
    </button>
  );
};
 
// 사용 예시
const App = () => {
  const buttonRef = React.useRef();
  return <MyButton ref={buttonRef}>Click Me</MyButton>;
};

 

참고 게시글

[번역] 리액트 19 forwardRef 지원 중단: 앞으로 ref를 전달하기 위한 표준 가이드