React 17버전에서 18버전으로 업데이트 시 방법 및 과정

(CRA + Typescript 로 프로젝트 생성 시)

과정1

& npm i [email protected] [email protected]

과정2

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 />)
}

과정3

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"
  ]
}

ref: https://www.youtube.com/watch?v=Gbcl_U8JwWY