(CRA + Typescript 로 프로젝트 생성 시)
& npm i [email protected] [email protected]
src 디렉토리 최상위 루트 파일에서 index.tsx 에 작성된 ReactDOM
을 지우고 createRoot()
로 변경
// Before
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
// After
import { createRoot } from 'react-dom/client';
import App from './App';
const el = document.getElementById('root');
if (el) {
const root = createRoot(el);
root.render(<App />)
}
root 경로에 존재하는 tsconfig.json
파일에 "types": ["react/next"]
를 작성
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"types": ["react/next"]
},
"include": [
"src"
]
}