ReactDom.render 버전 바꾸기

Narae Seo·2022년 10월 31일
0

NomadCoder

목록 보기
5/5

오랜만의 포스트이다.

프로젝트의 콘솔창에서 계속 빨간줄을 띄우던 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로 변경했더니 문제가 의외로 쉽게 해결되었다.

도움받은 링크

profile
꿈꾸는 프론트엔드 개발자

0개의 댓글