[React] useRef props (react 18 vs 19)

1. 개요

React 18과 19에서는 useRef를 props로 넘길 때 동작 방식에 차이가 있다.

React 19에서는 forwardRef 없이도 ref를 직접 props로 전달할 수 있도록 변경되었다.

이 차이를 이해하면 마이그레이션 시 발생할 수 있는 문제를 예방할 수 있다.

2. React 18에서의 동작 방식

React 18에서는 부모 컴포넌트가 자식 컴포넌트의 DOM 요소나 메서드에 접근하기 위해 forwardRef를 반드시 사용해야 했다.

import { useRef, forwardRef } from "react";

const ChildComponent = forwardRef((props, ref) => {
  return <input ref={ref} />;
});

function ParentComponent() {
  const inputRef = useRef(null);

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

forwardRef를 사용하지 않으면 ref가 일반적인 props로 전달되어 동작하지 않았다.

3. React 19에서의 변경 사항

React 19부터는 forwardRef 없이도 함수형 컴포넌트에서 ref를 직접 props로 받아 사용할 수 있다.

import { useRef } from "react";

const ChildComponent = ({ ref }) => {
  return <input ref={ref} />;
};

function ParentComponent() {
  const inputRef = useRef(null);

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

이제 ref를 일반적인 props처럼 직접 전달할 수 있으며, forwardRef 없이도 원하는 동작을 수행할 수 있다.

4. 주요 차이점 정리

버전useRef를 props로 직접 전달forwardRef 필요 여부

React 18	불가능	필수
React 19	가능	불필요

React 19에서는 forwardRef 없이도 ref를 props로 넘길 수 있으므로, 기존 코드를 마이그레이션할 때 이를 고려하여 수정하는 것이 좋다.

5. 결론

• React 18에서는 forwardRef를 사용하지 않으면 ref가 정상적으로 동작하지 않았다.
• React 19부터는 forwardRef 없이도 ref를 직접 props로 전달할 수 있다.
• 마이그레이션 시 forwardRef를 제거할 수 있는 부분이 있는지 확인하면 더욱 간결한 코드 작성이 가능하다.
• ref를 올바르게 전달하는 패턴을 따르면 React 19에서도 안정적인 코드 작성을 할 수 있다.