Create-React-App을 React 버전 18로 마이그레이션하는 방법

소개

React는 최근 라이브러리의 새 버전인 React 버전 18을 출시했습니다. 저는 Create-React-App으로 부트스트랩된 지금 한동안 유지 관리해 온 몇 가지 앱이 있습니다. 버전 18로 마이그레이션하는 방법과 그 과정에서 발생한 문제에 대해 살펴보겠습니다.

Here React 18의 변경 사항 목록을 찾을 수 있습니다.

나는 또한 그것에 대한 내 생각에 대한 작은 글을 가지고 있습니다 here .

React 버전 18로 Create-React-App 마이그레이션

실제 마이그레이션 프로세스는 매우 빠릅니다. 필요한 종속성을 설치해 보겠습니다.

yarn add react react-dom

create-react-app 팀은 마이그레이션 프로세스를 지원하고 새로운 앱이 즉시 제공되도록 버전 5.0.1을 내놓았습니다.

npm install --save --save-exact [email protected] 

or 

yarn add --exact [email protected]

Typescript를 사용하고 있다면 React뿐만 아니라 다른 타사 라이브러리에 대해서도 유형을 업데이트하는 것을 잊지 마십시오. 많은 사람들이 앱을 업데이트했습니다.

yarn add @types/react @types/react-dom @types/node --dev

필수 변경

가장 먼저 해야 할 일은 루트 노드가 React에 의해 렌더링되는 방식을 변경하는 것입니다. 첫 번째 코드 블록은 원래 모습입니다.

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

ReactDOM.render( <App /> , document.getElementById('root') );

이제 새로 추가된 createRoot 함수를 사용하겠습니다.

import { createRoot } from 'react-dom/client'; 
import App from './App'; 

const container = document.getElementById('root'); 
const root = createRoot(container); 

root.render(<App />);

React 버전 18로 Create-React-App 마이그레이션: Typescript

Typescript를 사용하지 않는 경우 이 부분을 건너뛸 수 있습니다.

먼저 처리해야 할 오류가 몇 개인지 확인해 봅시다. 이는 호환되지 않는 타사 라이브러리의 수에 따라 프로젝트마다 다르지만 모두 유사한 방식으로 해결됩니다.

다음 명령을 실행합니다.

해결해야 할 오류가 36개 있습니다. 다행히 대부분은 동일합니다.



이 프로젝트에서 Semantic UI을 사용했는데 UI 라디오 구성 요소에 몇 가지 오류가 있었습니다. 예를 들어 onChange 소품에서 매개변수를 받는 setView 함수가 있습니다. 어떤 이유로 e 및 데이터 매개변수에 대한 입력을 잃어버렸습니다.

Parameter 'data' implicitly has an 'any' type. onChange={(e, data) => setView(data.value as number)}

F12(Windows 사용자)를 누르거나 마우스 오른쪽 버튼을 클릭하고 유형 정의로 이동합니다. onChange의 소품에서 반환해야 하는 항목을 확인하고 유형을 함수에 수동으로 설정합니다.



라이브러리에서 유형을 가져오고 함수 자체 내에서 유형을 설정해야 합니다.

import type { CheckboxProps } from 'semantic-ui-react';


<Radio 
// other props 
onChange={(e: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => { // whatever your function does } } 
/>

React 버전 18로 Create-React-App 마이그레이션: Sentry

또한 Sentry 라이브러리를 사용하여 프로젝트의 오류를 추적합니다. Here’s a quick write-up 작동 방식에 대해 설명합니다. 센트리의 경우 ErrorBoundary 구성 요소에 몇 가지 오류가 있습니다. 아마도 패치가 될 것이지만 그때까지는 미리 할 수 ​​있습니다.

React 버전 18에서는 자식이 props에서 명시적으로 선언되어야 하므로 다음과 같은 오류가 발생합니다.

error TS2769: No overload matches this call. Overload 1 of 2, '(props: ErrorBoundaryProps | Readonly<ErrorBoundaryProps>): ErrorBoundary', gave the following error.

고맙게도 이 문제를 해결할 수 있는 patch-package라는 라이브러리가 있습니다. 설치합시다.

yarn add patch-package --dev

앞에서와 같이 단계별로 ErrorBoundary에 대한 유형 정의를 확인하겠습니다. F12 키를 누르거나 마우스 오른쪽 버튼을 클릭하고 유형 정의로 이동합니다.



예상대로 유형에는 children 소품이 없습니다. React.ReactNode로 설정하여 추가해 봅시다.

export declare type ErrorBoundaryProps = { 
children: React.ReactNode;
 //...rest of the type, just ignore it

patch-package가 이 변경 사항을 인식하려면 터미널에서 다음 명령을 실행해야 합니다.

npx patch-package @sentry/react

이렇게 하면 라이브러리에서 패치한 변경 사항을 나타내는 파일이 프로젝트에 생성됩니다.

diff --git a/node_modules/@sentry/react/types/errorboundary.d.ts b/node_modules/@sentry/react/types/errorboundary.d.ts
index 4e1f326..779e0e7 100644 
--- a/node_modules/@sentry/react/types/errorboundary.d.ts 
+++ b/node_modules/@sentry/react/types/errorboundary.d.ts 
@@ -9,6 +9,7 @@ export declare type FallbackRender = (errorData: {
 resetError(): void;
 }) => React.ReactElement; export declare type ErrorBoundaryProps = { 
+ children: React.ReactNode; 
/ **If a Sentry report dialog should be rendered on error */ showDialog?: boolean; 
/**

마지막 단계는 package.json의 스크립트에 다음 줄을 추가하는 것입니다.

"scripts": {
 // ...other scripts 
"postinstall": "patch-package" 
}

사이드노트

패치를 원하지 않는 라이브러리가 있고 유지 관리자가 오류를 수정하는 동안 당분간 오류를 무시하고 싶은 경우 작은 여담입니다. (또는 PR을 열어 수정할 수 있습니다! 😬) 오류 직전에 파일에 ts-ignore를 추가하십시오.

마무리

Create-React-App은 여전히 ​​React 앱을 부트스트랩하는 데 가장 널리 사용되는 방법이므로 마이그레이션할 수 있다는 것은 일부 사용자에게 매우 중요합니다. 🚀

이 게시물이 마음에 들면 Relatable Code에서 이와 같은 다른 게시물을 확인하세요.

이 내용이 마음에 드셨다면 언제든지 저에게 연락하거나

내newsletter에서 내 무료 개발자 로드맵과 주간 기술 산업 뉴스를 확인하십시오.