React 19 베타에서 변경된 ref 처리 방식

배경

사내 디자인 시스템 라이브러리를 유지보수하던 중 React 19 베타 문서를 확인하게 되었다. 가장 눈에 띈 변경사항은 forwardRef가 더 이상 필요하지 않다는 점이었다.

기존에는 ref를 prop으로 받기 위해 반드시 forwardRef로 감싸야 했다.

const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
  return <input ref={ref} {...props} />;
});

React 19에서의 변경

React 19부터는 함수 컴포넌트에서 ref를 일반 prop으로 받을 수 있다.

interface InputProps {
  ref?: React.Ref<HTMLInputElement>;
  // 다른 props...
}

const Input = ({ ref, ...props }: InputProps) => {
  return <input ref={ref} {...props} />;
};

마이그레이션 고려사항

당장 프로덕션에 적용하기엔 이르다고 판단했다. 다만 몇 가지 확인한 내용:

타입 정의 명확화: ref를 명시적으로 타입에 포함해야 한다
기존 코드 호환: forwardRef로 작성된 코드도 여전히 동작한다
번들 크기: forwardRef wrapper가 줄어들면서 약간의 이득이 있을 것으로 예상

결론

아직 베타 단계이므로 실제 적용은 안정화 이후로 미루기로 했다. 하지만 디자인 시스템의 새 컴포넌트 작성 시 React 19 스타일을 염두에 두고 설계하면 추후 마이그레이션이 수월할 것 같다.

React 팀이 오랫동안 불편했던 forwardRef 패턴을 개선한 점은 긍정적이다. 정식 릴리스가 기대된다.