React 18 업그레이드, 새로운 기능과 성능 향상을 경험하세요!
by DD
4년 전
조회수 12
React 18은 새로운 동시성 렌더러를 도입하여 기존 앱의 점진적 업그레이드를 지원함
createRoot API, 자동 배치 등 클라이언트/서버 렌더링 API가 변경됨
Strict Mode 강화 및 Internet Explorer 지원 중단 등 주요 변경 사항 발표
createRoot API와 동시성 렌더링
React 18은 createRoot API를 통해 동시성 렌더러를 활성화한다. 구체적으로, 기존 `ReactDOM.render` 대신 `createRoot`를 사용하며, 자동 배치 기능을 통해 성능을 향상시킨다. 따라서, UI 업데이트의 효율성을 높이고 사용자 경험을 개선한다.
서버 렌더링 API 변경 사항
React 18은 Suspense를 완벽하게 지원하기 위해 서버 렌더링 API를 개편했다. renderToNodeStream은 더 이상 사용되지 않으며, renderToPipeableStream 또는 renderToReadableStream을 사용해야 한다. 반면, renderToString과 renderToStaticMarkup은 제한적으로 Suspense를 지원한다.
Strict Mode와 테스트 환경 설정
React 18의 Strict Mode는 개발 모드에서 컴포넌트를 여러 번 마운트/언마운트하여 잠재적인 문제를 찾아낸다. 따라서, useEffect와 같은 사이드 이펙트가 있는 코드를 주의해야 한다. 또한, 테스트 환경에서 act 경고를 해결하기 위해 `globalThis.IS_REACT_ACT_ENVIRONMENT = true`를 설정해야 한다.
