오랜만의 포스트이다.
프로젝트의 콘솔창에서 계속 빨간줄을 띄우던 ReactDOM.render를 수정했다
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
위와 같은 에러를 지속적으로 볼 수 있었다
이 에러는 ReactDOM.render는 React 18에서 더이상 지원되지 않지만
강의에서는 16을 사용하였기 때문에 발생했던 에러였다.
index.tsx의 기존의 소스코드이다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { RecoilRoot } from 'recoil';
import { ThemeProvider } from 'styled-components';
import { darkTheme } from './theme';
import { createGlobalStyle } from 'styled-components';
...
ReactDOM.render(
<React.StrictMode>
<RecoilRoot>
<ThemeProvider theme={darkTheme}>
<GlobalStyle />
<App />
</ThemeProvider>
</RecoilRoot>
</React.StrictMode>,
document.getElementById('root')
);
변경한 소스코드는 다음과 같다
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { RecoilRoot } from 'recoil';
import { ThemeProvider } from 'styled-components';
import { darkTheme } from './theme';
import { createGlobalStyle } from 'styled-components';
const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(
<React.StrictMode>
<RecoilRoot>
<ThemeProvider theme={darkTheme}>
<GlobalStyle />
<App />
</ThemeProvider>
</RecoilRoot>
</React.StrictMode>
);
createRoot를 import 후 root를 선언해주고,
ReactDOM.render에서 root.render로 변경했더니 문제가 의외로 쉽게 해결되었다.