React 18 버전으로 개발하면서 만난 문제들

이 포스팅은 개인적으로 작은 사이트 프로젝트나 과제 등을 React18 버전으로 진행하면서 발생한 에러 등을 정리하기 위한 글입니다. 지속적으로 추가 될 예정입니다.

1. cra에서 기존에 제공하던 typescript 템플릿 등의 의존성 오류

현재 cra를 통해 리액트 프로젝트를 생성하면 18버전으로 생성이 됩니다. 하지만 기존에 있던 typescript 등이 적용된 템플릿은 아직 의존성에 대한 부분들이 업데이트 되지 않았습니다. 의존성 문제는 아래 7가지 라이브러리를 최신 버전으로 업데이트 하여 해결하였습니다.

"@testing-library/jest-dom"
"@testing-library/react"
"@testing-library/user-event"
"@types/jest"
"@types/node"
"@types/react"
"@types/react-dom"

GitHub - jch1223/react-typescript-redux

2. @types/react 18버전에서 FC 타입의 props 변경

import { FC } from 'react';

const App: FC = () => {
  ...
  return <div>App</div>;
};

React 컴포넌트의 타입을 지정할 때 FC 타입을 주로 사용하였습니다. 이전 버전에서는 FC 타입에 기본적으로 children props가 있었지만 @types/react 18버전부터 children props가 제거 되었습니다.

React 18 TypeScript children FC