React 18로 마이그레이션하는 방법은 무엇입니까?

React 18  은 동시 렌더링 및 일시 중지를 기반으로 하는 새로운 기능으로 인기 있는 JavaScript 구성 요소 프레임워크를 발전시킵니다. 전환하는 앱에 대해 더 나은 성능, 더 많은 기능 및 개선된 개발자 경험을 약속합니다.

이 기사에서는 기존 코드베이스를 React 18로 업데이트하는 방법을 보여줍니다. 이 가이드는 가장 널리 적용되는 변경 사항에 대한 개요일 뿐입니다. 이미 React 모범 사례를 따르고 있는 소규모 프로젝트의 경우 마이그레이션이 어렵지 않을 것입니다. 복잡한 구성 요소의 큰 집합은 몇 가지 문제를 일으킬 수 있습니다. 이에 대해서는 아래에서 자세히 설명합니다.

React 18 설치하기

다른 작업을 수행하기 전에 npm을 사용하여 프로젝트의 React 종속성을 버전 18로 업데이트합니다.

$ npm install react@latest react-dom@latest

새 버전은 기술적으로 이전 버전과 호환되지 않습니다. 새로운 기능은 구독을 통해 활성화됩니다. 아직 코드를 변경하지 않았으므로 애플리케이션을 실행하고 올바르게 렌더링되는지 확인할 수 있어야 합니다. 프로젝트는 기존 React 17 동작과 함께 작동합니다.

$ npm start

React 18 기능 활성화: 새로운 루트 API

코드베이스를 변경하지 않고 React 18을 사용하면 한 가지 부작용이 발생합니다. 애플리케이션이 개발 모드로 마운트될 때마다 브라우저 콘솔 경고가 표시됩니다.

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.

프로젝트를 업그레이드할 준비가 되지 않은 경우 이 지원 중단 메시지를 무시해도 됩니다. React 18의 기능을 사용하려면 여기에 설명된 변경을 수행해야 합니다. 이전 ReactDOM.render()기능은 보다 객체 지향적인 새 루트 API로 대체되었습니다. 향상된 사용 편의성 외에도 모든 새로운 타이틀 기능을 지원하는 병렬 렌더링 시스템을 활성화합니다.

파일 에서 다음과 유사한 행 index.js을 app.js찾으십시오.

이것은 React 애플리케이션의 일반적인 진입점입니다. 가져온 App구성 요소의 인스턴스를 응용 프로그램의 루트 요소로 렌더링합니다. 렌더링된 콘텐츠 innerHTML는 id="react".

React 18 루트 API로 전환하려면 위의 코드를 다음으로 바꾸세요.

효과는 이전 ReactDOM.render()API와 유사합니다. 루트 요소를 초기화하고 앱을 단일 명령형 작업으로 렌더링하는 대신 React 18은 먼저 루트 개체를 만든 다음 콘텐츠를 명시적으로 렌더링하도록 합니다.

그런 다음 코드에서 루트 노드를 마운트 해제할 위치를 찾습니다. 루트 개체 ReactDOM.unmountComponentAtNode()에서 새 메서드로 이동 합니다.unmount()

렌더 콜백 교체

ReactDOM.render()선택적 메서드 콜백 인수는 React 18 루트 API에 직접 대응하는 항목이 없습니다.이전에는 이 코드를 사용하여 Rendered!React가 루트 노드 렌더링을 완료한 후 콘솔에 로그인할 수 있었습니다.

새로운 React 18 서버 부분 수화 및 스레드 렌더링 기능을 사용할 때 콜백 타이밍을 예측할 수 없기 때문에 이 기능 이 제거되었습니다 . 이미 렌더링 콜백을 사용하고 있고 호환성을 유지해야 하는 경우 링크 메커니즘을 사용하여 유사한 동작을 달성할 수 있습니다.

React는 컴포넌트를 마운트할 때 함수 참조를 호출합니다. 루트 노드인 구성 요소에 대한 참조를 설정하면 렌더링이 발생하는 시점을 결정할 수 있어 이전 렌더링 콜백 시스템과 유사한 효과를 제공합니다.

업데이트 문제 디버깅

이제 앱이 콘솔 경고 없이 React 18 기능을 사용하여 렌더링되어야 합니다. 애플리케이션을 철저히 테스트하여 모든 것이 예상대로 작동하는지 확인하십시오. 문제를 발견하면 이러한 일반 솔루션으로 문제를 해결할 수 있습니다.

<엄격 모드> 확인

컴포넌트 래핑 앱 <StrictMode>은 React 18 디자인 모드에서 렌더링될 때 다르게 작동할 수 있습니다. 이는 이제 엄격 모드가 코드베이스가 향후 릴리스에서 React에 완전히 도입 될 재사용 가능한 상태 를 지원하는지 확인하기 때문입니다.

재사용 가능한 상태를 사용하면 React가 이전에 제거된 구성 요소를 다시 연결하여 마지막 상태를 자동으로 복원할 수 있습니다. 이를 위해서는 구성 요소가 이중 호출 효과에 저항해야 합니다. 이제 Strict 모드는 컴포넌트가 사용될 때마다 마운트, 마운트 해제 및 다시 마운트를 시뮬레이션하여 이전 상태를 복원할 수 없는 문제를 식별하여 재사용을 준비하는 데 도움이 됩니다. 응용 프로그램이나 해당 종속성에서 해결할 준비가 되지 않은 문제가 발견되면 엄격 모드를 비활성화할 수 있습니다.

일괄 상태 업데이트 지원

React 18은 성능 향상을 위해 상태 업데이트가 “패키지”되는 방식을 변경합니다. 함수에서 상태 값을 여러 번 변경하면 React는 이를 하나의 다시 렌더링으로 병합하려고 합니다.

이 메커니즘은 효율성을 개선하지만 이전에는 React 이벤트 핸들러 내에서만 작동했습니다. React 18에서는 기본 이벤트 핸들러, 시간 초과 또는 약속에서 온 경우에도 모든 상태 업데이트에서 작동합니다. 이러한 위치에서 순차적 상태 업데이트를 수행하는 경우 일부 코드는 이전과 다르게 작동할 수 있습니다.

코드를 리팩토링할 준비가 되지 않은 상황에서는 이 동작을 비활성화할 수 있습니다. 상태 업데이트를 래핑 flushSync()하여 즉시 커밋하도록 합니다.

제거 및 지원되지 않는 기능 사용 중지

위의 모든 측면을 고려하면 애플리케이션이 React 18과 완전히 호환되어야 합니다 . API 표면 에 몇 가지 변경 사항이 있지만 대부분의 애플리케이션에는 영향을 미치지 않습니다. 다음은 주의해야 할 몇 가지 사항입니다.

• unstable_changedBits제거됨 – 이 지원되지 않는 API를 통해 상황별 업데이트를 선택 해제할 수 있습니다. 더 이상 사용할 수 없습니다.
• Object.assign()폴리필이 제거되었습니다. 내장되어 있지 않은 아주 오래된 브라우저를 지원해야 하는 경우 object-assign폴리필 패키지 를 수동으로 추가해야 합니다 Object.assign().
• Internet Explorer는 더 이상 지원되지 않습니다. React는 공식적 으로 6월에 브라우저 지원이 종료 될 때까지 Internet Explorer와의 호환성을 중단했습니다. 여전히 IE에서 작동하는 애플리케이션이 필요한 경우 React 18로 업그레이드하면 안 됩니다.
• suspend with undefinedfallback 을 사용하는 것은 이제 이전에 생략된 suspend bounds 와 동일 하므로 코드가 트리의 다음 부모 경계로 계단식 배열될 수 있습니다 null. fallback={undefined}React 18은 이제 대체 없이 Suspense 구성 요소를 존중합니다.

서버 측 렌더링

서버 측 렌더링을 사용하는 애플리케이션은 React 18에서 작동하기 위해 몇 가지 추가 변경 사항이 필요합니다.

hydrate()새 루트 API에 따르면 클라이언트 측 코드의 이전 함수를 패키지 에서 hydrateRoot()제공 하는 새 함수로 교체해야 합니다.react-dom/client

서버 측 코드에서 레거시 렌더링 API 호출을 새로운 대응으로 바꿉니다. 대부분 의 경우 renderToNodeStream()새 것으로 전환해야 합니다 renderToReadableStream(). 새로운 스트리밍 API는 React 18의 스트리밍 서버 렌더링 기능을 노출합니다. 여기서 서버는 앱이 처음 렌더링된 후 브라우저에 새 HTML을 계속 전달할 수 있습니다.

React 18 기능 사용 시작

이제 업그레이드했으므로 React 18 기능을 통합하여 앱을 더욱 강력하게 만들 수 있습니다. React의 동시성 사용은 구성 요소 렌더링이 중단되어 새로운 가능성과 더 반응적인 사용자 인터페이스를 열 수 있음을 의미합니다.

추가된 기능 중 일부에는 주요 Suspense 업데이트, Transitions 를 사용하여 상태 업데이트 의 우선 순위를 지정하는 방법 , 긴급하지는 않지만 빈번한 업데이트로 인한 재렌더링 조절을 위한 기본 제공 메커니즘 이 포함됩니다. 또한 몇 가지 기타 변경 및 개선 사항이 있습니다 . 구성 요소 메서드 undefined에서 반환할 수 있고, 연결 되지 않은 구성 요소 render()호출에 대한 경고 가 제거되었으며 , , 와 같은 몇 가지 새로운 HTML 속성 이 React DOM 렌더러에서 인식됩니다.setState()imageSizesimageSrcSetaria-description

요약

React 18은 안정적이며 사용할 준비가 되었습니다. 대부분의 경우 업그레이드 프로세스는 빠르고 쉬워야 하며 npm 업그레이드와 새 루트 API로의 전환만 필요합니다. 그러나 여전히 모든 구성 요소를 테스트해야 합니다. 엄격 모드나 자동 패키징이 적용될 때와 같은 일부 상황에서는 다르게 작동할 수 있습니다.

이 새로운 릴리스는 모든 종류의 웹 애플리케이션을 위한 고성능 프레임워크로서 React의 미래 방향을 가리킵니다. 또한 서버 측 일시 중지와 초기 렌더링 후 사용자에게 콘텐츠를 계속 스트리밍 하는 기능을 추가하여 React의 서버 측 렌더링 기능을 확장합니다. 이를 통해 개발자는 클라이언트와 서버 모두에서 렌더링을 보다 유연하게 배포할 수 있습니다.