React 18로 업그레이드하는 방법

React 18은 긴 React 주요 릴리스의 최신 버전입니다. 이를 통해 new features for Suspense , new useId , useSyncExternalStore 및 useDeferredValue 후크와 새로운 startTransition API에 액세스할 수 있습니다.

React 18은 아직 안정적인 릴리스가 아니지만 애플리케이션을 테스트하는 것이 유용할 수 있습니다.

React의 이전 주요 릴리스와 마찬가지로 React 18은 대부분의 앱에서 상당히 쉽게 마이그레이션할 수 있습니다.

Strict Mode has received some changes 앱에 영향을 미칠 수 있고 automatic batching 몇 가지 새로운 엣지 케이스가 도입될 수 있지만 follow the Rules of React properly 그렇지 않은 앱에만 영향을 미칩니다.

이러한 고려 사항 외에 업그레이드합시다!

설치

먼저 React 18을 설치하여 시작합니다.

npm i [email protected] [email protected]

또는 yarn를 사용하는 경우:

yarn add [email protected] [email protected]

Create React App을 사용하는 경우 다음을 사용할 수도 있습니다upgrade to the newest v5.

npm i react-scripts@5

또는

yarn add react-scripts@5

그런 다음 React에 의존할 수 있는 모든 종속성을 업그레이드해야 합니다.

예를 들어 업그레이드React Redux to v8 또는 SWR to 1.1.0

렌더링 방법 업데이트

React 18을 설치한 후 앱이 실행 중일 때 오류가 발생할 수 있습니다.

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

이것은 이전에 React 17 이전에는 다음 코드를 포함하는 파일(일반적으로 index.js 또는 index.ts)이 있었기 때문입니다.

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

이 코드는 이 릴리스에서 계속 작동하지만 React 18의 새로운 기능 대부분을 활용할 수는 없습니다. 또한 향후 React 릴리스에서 제거될 예정입니다.

이 문제를 해결하려면 이 코드를 다음으로 바꿉니다.

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

완료되면 사용 중인 React 버전을 확인할 수 있어야 합니다{React.version}.

Try out the related code sample for getting React 18 up-and-running

결론

약속한 대로 React 18 업데이트는 매우 간단합니다! 대부분의 응용 프로그램은 너무 많은 문제 없이 업그레이드할 수 있어야 합니다.

마이그레이션 중에 문제가 발생하고 StrictMode를 사용 중인 경우 일시적으로 제거하여 문제가 발생하는지 확인하십시오. React 18 introduced some changes that may impact some apps.

새로운 React concurrent features 즐거운 해킹을 즐기시기 바랍니다!