리액트 버전업(v18)

동기

• 기존 프로젝트에서는 React 17 버전을 사용하고 있었는데, 17 버전에서 React-Query를 사용할 경우 에러 로그가 남겨져 버전업을 고려하게 되었다
  • 에러 메시지 : Can't perform a React state update on an unmounted component
    • 모달창을 닫거나 페이지를 이동하기 전에 상태를 변경하고 이동을 하는 경우, 위 에러가 흔하게 발생하였다
    • 관련 링크 : https://github.com/TanStack/query/issues/3804
• 뿐만 아니라 React 18 버전에서 Automatic Batching과 Suspense 기능이 추가되어 프로젝트에 반영하면 구현에 더 도움이 될 것으로 판단하였기 때문에 버전업을 고려했다
  • Automatic Batching으로 비동기 함수 안에서의 상태 업데이트 시에도 Batch 처리가 가능하게 되었다
  • Suspense를 사용하면 로딩 상태를 부모 컴포넌트에게 제어권을 부여할 수 있다. 자식 컴포넌트에서는 로딩에 대한 상태를 관리하지 않아도 된다

설치

npm i react@latest react-dom@latest

npm i -D @types/react@latest @types/react-dom@latest

파일 수정

• react 17 version(Before)

import { render } from 'react-dom';  
const container = document.getElementById('app');  
render(<App tab="home" />, container);

• react 18 version(After)

import { createRoot } from 'react-dom/client';  
const container = document.getElementById('app');  
const root = createRoot(container); // createRoot(container!) if you use TypeScript  
root.render(<App tab="home" />);

에러 및 해결

• react 18버전부터 React.FC에 암묵적인 children 선언이 제거되어서 컴포넌트의 타입을 React.FC로 지정하고 children을 props로 사용한 컴포넌트에서 에러가 발생하여 이를 수정해주어야 일일이 수정해주어야 했다.