ReactDOM.render is no longer support... - 인프런

Slack 클론 코딩[실시간 채팅 with React]

Q&A(CRA를 안 쓰는 이유)

ReactDOM.render is no longer supported in React 18 콘솔에러 질문드립니다

작성

1.4K

react-dom.development.js:86 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

이라는 콘솔에러가 계속 뜨길래 구글링을 하여

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './layouts/App';

const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

로 코드를 바꿔서 실행하니 local이 성공적으로 켜지긴하지만

이렇게 어마어마한 에러가 출력됩니다

제가 어느부분의 코드를 잘못작성하여 이렇게 뜨는지 모르겟습니다 🤔

클론코딩 babel 웹팩 typescript Socket.io react

답변 2

도토잠보

질문자

삭제된 글입니다

제로초(조현영)

지식공유자

에러메시지에 모든게 나와있습니다. 심지어 직접 코딩하신 에러잖아요. root element가 없다는데

#root가 존재하는게 맞나요?

제로초(조현영)

지식공유자

18버전으로 하기 어려우시면 17버전으로 강좌 내용 그대로 따라가시면 됩니다.

제로초(조현영)

지식공유자

강좌는 리액트 17버전인데 18버전 쓰셨습니다.

18버전 코드는 잘 하셨는데

client 안에 index.css가 있는 게 맞나요? 맞다면 웹팩 설정 제대로 하셨나요? 저는 css를 쓰지 않습니다.

도토잠보

질문자

아고 공식문서보는게 습관이 되지 않아서요 ㅠㅠ 진작 공식문서 보고 할껄 그랬어요

공식문서에 답이 있었는데 돌아돌아 갔네요 ㅠㅠ

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './layouts/App';

const container = document.getElementById('app');
const root = createRoot(container!); // createRoot(container!) if you use TypeScript

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

이렇게 코드작성하니 오류도안뜨고 문제없이 잘 돌아갑니다 흑흑흑

인프런 커뮤니티 질문&답변

ReactDOM.render is no longer supported in React 18 콘솔에러 질문드립니다