React 18로 업그레이드

요약introduction to React 18이 있으므로 이제 어떻게 업그레이드할 수 있는지 살펴보겠습니다.

스타터가 작동하는 것을 좋아한다면 download the following React 17 starter from GitHub .

React 17에서 18로 업그레이드

이 스타터를 빌드하는 현재 버전은 React 17로 만들어졌으므로 가장 먼저 해야 할 일은 최신 버전을 사용하도록 업데이트하는 것입니다.

npm install react@latest react-dom@latest

이렇게 하면 react 및 react-dom 버전이 18 이상으로 업그레이드됩니다.

기존 프로젝트에 있기 때문에 @latest를 사용하고 있습니다. 그렇지 않으면 이미 17에 대한 종속성이 잠겼기 때문에 업그레이드되지 않습니다. (또는 @18를 사용할 수 있습니다.)

이제 React 자체를 버전 18로 업그레이드했으므로 애플리케이션을 실행하려고 할 때 어떤 일이 발생하는지 살펴보겠습니다.

앱이 스풀링되지만 콘솔을 보면 다음과 같은 오류 팝업이 표시됩니다.



React는 동시 렌더링을 지원하기 위해 새로운 루트 API를 도입했습니다.
이를 활성화하려면 진입점 렌더링을 변경해야 합니다.

이전에는 다음과 같이 호출했습니다.

import ReactDOM from 'react-dom';

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

React 18에서는 이것을 루트 생성 함수로 변경해야 합니다.

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

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

기본적으로 기존 앱을 렌더링할 루트 컨테이너를 만드는 두 번째 단계를 추가해야 합니다.

이제 응용 프로그램을 다시 실행하면 오류가 사라집니다.

기타 주목할만한 변경 사항

서버 측 렌더링을 사용하는 경우 몇 가지 문제가 더 발생할 수 있습니다.
대신 이전 서버 구현에 Suspense 사용을 선호합니다.

다음 API를 사용하는 경우 그 뒤에 언급된 API로 리팩터링하십시오.

renderToNodeStream => renderToPipeableStream

renderToString => 지원이 제한됨

renderToStaticMarkup => 지원이 제한됨

명심해야 할 또 다른 사항은 TypeScript입니다. 사용하는 경우 @types/react 및 @types/react-dom를 최신 버전으로 업데이트하십시오.
더 안전하고 React 18에서 발생할 수 있는 문제를 포착하도록 유형이 업데이트되었습니다.

내 테스트는 어떻습니까?

내 최신 버전testing articles을 따라했다면 응용 프로그램에 테스트를 추가하기 시작했을 수 있습니다.

테스트를 실행할 때 어떤 일이 발생하는지 먼저 살펴보겠습니다.



그리고 다시 브라우저에서 이전에 있었던 오류를 볼 수 있습니다.
이 문제를 해결하려면 테스트 라이브러리를 업그레이드해야 합니다.
npm install @testing-library/react@latest
테스트 라이브러리가 업데이트되었으므로 이제 문제 없이 애플리케이션을 실행할 수 있습니다.

이에 대한 변경된 코드starter project on GitHub를 찾을 수 있습니다.

결론

기본 응용 프로그램의 경우 매우 간단한 프로세스입니다.
서버 측 렌더링을 많이 사용하거나 효과 타이밍에 크게 의존하는 경우 조금 더 디버그해야 할 수 있습니다.

변경 사항은 렌더링이 수행되는 방식과 관련이 있으므로 먼저 변경 사항을 읽어보는 것이 좋습니다.

Read the React 18 changes

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나