[CRA] TypeScript와 React 18

기울었다는 느낌은 기분탓이다

 

간만에 react를 써보려는데 갑자기 리액트가 버전업이 되었다면서 빨간 줄을 내뿜었다.
잘 되던 게 안돼서 당황스러웠는데, 나중에 또 당황하지 않기 위해 기록해두려고 한다.

 

 

우선 cra로 typescript react를 만드는 법

npx create-react-app { project-name } --template typescript

깃헙에 연동하고 싶기 때문에 repository를 만들고 다음 명령어를 입력했다. (github repository에서 copy할 수 있다)

git remote add origin { github-url }
git branch -M main
git push -u origin main

 

 

이슈 해결

 

그러고 index.tsx를 보면 createRoot에서 난리가 나고 있다. 그런거 없다면서
우선 여기에 나온 대로 순서대로 따라했다.
https://blog.logrocket.com/how-to-use-typescript-with-react-18-alpha/

How to use TypeScript with React 18 alpha - LogRocket Blog

근데 그러고도 안됐다! 😡
그래서 또 검색을 해서 아래의 깃헙 이슈를 찾았다.
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/43848

ReactDOM.createRoot does not support · Issue #43848 · DefinitelyTyped/DefinitelyTyped

// @ts-ignore

라는 편리한 기능이 있긴 하지만 너무 남발하면 좋지 않을 것 같아서 스크롤을 쭉 내렸는데

"@types/jest": "^27.4.1", "@types/node": "^16.11.26", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "react": "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "5.0.0", "typescript": "^4.6.3",

이걸 보고 깔으라는 건 다 깔고 나서

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

import 경로를 이와 같이 바꿔주었더니 해결되었다!

귀찮음을 줄이려고 cra를 쓰는 건데 버전업이 되면서 귀찮은 과정이 몇가지 추가되었다.
이쯤되면 cra도 react18에 맞게 업데이트가 되어야 하지 않나 싶다.