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

원본: https://imrankhani.medium.com/react-19-deprecated-forwardref-a-guide-to-passing-ref-as-a-standard-prop-7c0f13e6a229

리액트 팀은 19 버전부터 컴포넌트 내에서 ref를 처리하는 방식을 간소화하여 기존 API 설계에 큰 변화를 가져왔습니다. forwardRef 는 지원 중단 될 예정이고 이제 개발자들은 표준 프로퍼티로 ref를 직접 전달할 수 있습니다. 리액트 팀은 컴포넌트 아키텍처를 간소화하고 보일러플레이트 코드를 줄이고자 하는 목적으로 이러한 변경을 진행하였습니다. 이제 기존 코드 베이스에서 어떻게 변경해야 하는지 알아보도록 합시다.

forwardRef란 무엇인가요?

리액트 19 이전에는 ref를 클래스 컴포넌트와 DOM 요소에만 사용할 수 있도록 제한했기 때문에 함수형 컴포넌트에서는 본질적으로 ref를 받을 수 없었습니다. 이 문제를 해결하기 위해 forwardRef를 사용해서 명시적으로 ref를 자식 컴포넌트나 DOM 노드들에 전달했습니다.

리액트 19 이전 버전에서의 사용 예시

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>;
};

이 패턴은 초보자들이 이해하기 어렵고 보일러플레이트 코드를 양산했습니다.

리액트 19에서는 뭐가 달라졌을까요?

리액트 19에서는 다른 프로퍼티처럼 함수형 컴포넌트에 ref를 직접 전달할 수 있게 되어서 더 이상 forwardRef를 사용할 필요가 없어졌습니다.

리액트 19에서 단순화된 문법의 예시

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>;
};

더 이상 forwardRef를 사용해서 감싸지 않아도 되어 훨씬 더 직관적이고 깔끔해졌습니다.

이 변경점이 중요한 이유

1. 간단한 사용 — 더 이상 ref를 넘기기 위해 forwardRef를 사용해야 하는 정신적 부담이 없어졌습니다.
2. 보일러플레이트 코드가 줄어듦 — 매번 불필요하게 함수로 감쌀 필요 없이 깔끔한 코드 작성이 가능합니다.
3. 일관된 패턴 — 함수형 컴포넌트, 클래스 컴포넌트, 그리고 DOM 요소에서 ref를 동일한 방식으로 처리할 수 있습니다.

리액트 19에서 forwardRef를 마이그레이션 하기 위한 단계

단계 1 — forwardRef 를 제거합니다.

리액트 19 이전 (리액트 18)

const MyComponent = forwardRef((props, ref) => (
  <div ref={ref}>{props.children}</div>
));

리액트 19

const MyComponent = ({ ref, ...props }) => {
  return <div ref={ref}>{props.children}</div>;
};

단계 2 — 타입스크립트 타입 정의 업데이트(ref를 사용하는 경우만)

type MyComponentProps = {
  ref?: React.Ref<HTMLDivElement>;
  children: React.ReactNode;
};
 
const MyComponent = ({ ref, ...props }: MyComponentProps) => (
  <div ref={ref}>{props.children}</div>
)

주요 고려 사항

1. 이전 버전과의 호환성 — forwardRef 코드는 계속 동작하지만, 앞으로를 대비해 점진적으로 마이그레이션 하는 것이 좋습니다.
2. 라이브러리 호환성 — 많은 라이브러리가 여전히 forwardRef를 사용할 수 있습니다. 앞으로 업데이트 및 변경 점을 체크하세요.
3. 예외 케이스들 — 클래스 컴포넌트에서는 ref의 동작이 변경되지 않습니다.(ref는 컴포넌트 인스턴스를 가리킴), DOM 요소에서는 JSX 요소에서 계속 ref를 직접 사용할 수 있습니다.

forwardRef의 미래

forwardRef는 더 이상 권장되지 않지만 리액트 19에서는 호환성을 위해 계속 동작합니다. 앞으로 리액트 버전에서는 완전히 삭제될 예정입니다. 리액트 팀은 대규모 코드 베이스의 마이그레이션을 자동화하는 스크립트를 제작할 예정이라 합니다.

결론

리액트 19의 ref prop 사용방법을 간소화하는 업데이트는 보일러플레이트 코드를 줄이고 일관된 패턴을 제공하며 개발자 경험을 좋게 만들 겁니다. 이 변경을 미리 적용하면 원활한 업그레이드와 깔끔한 코드를 작성할 수 있습니다. 여러분의 컴포넌트들에 당장 적용해 보세요!

꿀팁: 리액트 팀에서 만든 공식 마이그레이션 스크립트를 사용하면 대규모 마이그레이션을 자동화할 수도 있습니다.

🚀 단순하고 행복한 코딩을 즐겨봅시다! 리액트 19의 변경 사항을 아는 데 도움이 되었으면 Medium 플랫폼 내에서 Clap을 눌러주세요.

참고링크

• 리액트 19 업그레이드 가이드
• 리액트 RFC: Ref 정리 함수
• TypeScript + 리액트 CheetSheet