[React19] React 19 ref와 React 18 forwardRef 비교

💡React는 컴포넌트의 DOM 참조를 관리하기 위해 ref를 제공합니다. React 18과 19 버전에서 forwardRef와 ref의 사용 방식에는 몇 가지 차이점이 있습니다. 아래에서 각 버전의 주요 특징을 설명하고, 코드 예제를 통해 차이점을 명확히 보여드리겠습니다.

---

React 18의 forwardRef

특징

1. forwardRef는 함수형 컴포넌트에서 부모가 전달한 ref를 자식 컴포넌트의 DOM 요소에 연결하는 데 사용됩니다.
2. 주로 HOC(High-Order Component) 또는 재사용 가능한 컴포넌트를 만들 때 유용합니다.
3. React 18에서는 ref를 전달하기 위해 React.forwardRef로 감싸야 하며, 이 과정에서 반드시 두 번째 매개변수로 ref를 수동으로 받아야 합니다.

예제

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

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

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

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <InputComponent ref={inputRef} placeholder="Type here..." />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

export default App;

설명

• InputComponent는 forwardRef를 사용해 ref를 input DOM 요소에 전달합니다.
• 부모 컴포넌트 App에서 useRef로 inputRef를 생성하고, 이를 InputComponent에 전달하여 DOM 참조를 관리합니다.

---

React 19의 ref

특징

1. React 19에서는 함수형 컴포넌트에 직접 ref를 사용할 수 있는 새로운 기능이 도입되었습니다.
2. 이제 forwardRef 없이도 ref를 함수형 컴포넌트에 전달할 수 있습니다.
3. React가 자동으로 ref를 처리하므로 코드가 더 간결해집니다.

예제

import React, { useRef } from 'react';

const InputComponent = React.memo((props) => {
  return <input {...props} />;
});

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

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <InputComponent ref={inputRef} placeholder="Type here..." />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

export default App;

설명

• InputComponent는 별도의 forwardRef 없이도 ref를 받을 수 있습니다.
• React 19에서는 내부적으로 ref를 처리하므로 추가 설정 없이도 DOM 참조가 가능합니다.

---

주요 차이점

특징 React 18 React 19

forwardRef 필요 여부	필요	불필요
코드 간결성	비교적 복잡함	더 간결함
DOM 참조 처리 방식	명시적으로 forwardRef를 통해 전달	React가 내부적으로 자동 처리
기존 코드와의 호환성	별도의 업데이트 없이 사용 가능	React 19로 업그레이드해야 활용 가능

---

결론

React 19의 새로운 ref 기능은 코드 간결성과 사용 편의성을 크게 개선합니다. 이전 버전에서 forwardRef를 사용해 작성했던 코드가 많다면, React 19로 업그레이드 후 더 간단한 구조로 리팩토링할 수 있습니다. 다만, forwardRef를 이용한 고급 컴포넌트 구성은 여전히 유효하므로, 필요에 따라 적절한 방법을 선택하세요.