[번역] React 19 Upgrade Guide

 

React 19 업그레이드 가이드의 내용을 번역해서 제공합니다:

---

React 19로 업그레이드

React 19로의 업그레이드는 대부분의 애플리케이션에 큰 영향을 미치지 않도록 설계되었습니다. 몇 가지 주요 변경 사항이 있지만, 대부분은 간단히 업그레이드할 수 있습니다.

---

React 18.3 릴리스

React 19로 원활히 업그레이드할 수 있도록 돕기 위해 React 18.3이 릴리스되었습니다. React 18.3은 React 18.2와 거의 동일하지만, React 19에서 제거될 API를 사용하는 경우 경고가 추가되었습니다. React 18.3으로 업그레이드하면 문제를 사전에 식별하고 수정할 수 있습니다.

---

설치 방법

최신 버전의 React와 React DOM을 설치하려면 다음 명령을 실행하세요:

npm install --save-exact react@^19.0.0 react-dom@^19.0.0

Yarn을 사용하는 경우:

yarn add --exact react@^19.0.0 react-dom@^19.0.0

TypeScript를 사용하는 경우, 다음 명령을 통해 타입 정의를 업데이트하세요:

npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0

Yarn을 사용하는 경우:

yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0

---

주요 변경 사항

새로운 JSX 변환 필수화

React 19에서는 새로운 JSX 변환이 필수입니다. 이 변환은 React를 명시적으로 import하지 않고도 JSX를 사용할 수 있으며, 번들 크기를 줄이는 데 도움을 줍니다.

만약 새로운 JSX 변환이 활성화되지 않았다면, 다음과 같은 경고가 표시됩니다:

Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance: https://react.dev/link/new-jsx-transform

이 경고가 나타나면, JSX 변환 업데이트 가이드를 참고하여 변환을 활성화하세요.

ReactDOM.render 제거

React 19에서는 ReactDOM.render가 제거되었으며, 대신 createRoot를 사용해야 합니다. 예를 들어:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

 

---

자동 코드 변환 도구 (Codemods)

React 팀은 업그레이드를 돕기 위해 react-codemod 저장소에 codemod를 제공합니다. 이 도구는 코드를 자동으로 업데이트하여 새로운 API로 전환합니다. 사용하려면 다음 명령을 실행하세요:

npx react-codemod@latest react/19/migration-recipe

Codemod는 몇 가지 자동 변환 작업을 실행하여 React 19로의 마이그레이션을 단순화합니다.

---

결론

React 19로 업그레이드는 몇 가지 변경 사항을 포함하지만, 제공된 도구와 가이드를 따르면 대부분의 애플리케이션에서 원활하게 진행될 것입니다. React 18.3으로 먼저 전환하여 잠재적인 문제를 식별한 후 React 19로 업그레이드하는 것을 추천합니다.