[ Error ] 리액트 18 render 에러

노도·2022년 4월 11일
0
post-thumbnail
< 오늘은 너구나.. 드루와 >

📍 오류와 첫만남

평소처럼 npm start를 했는데,
다음과 같은 에러 메세지가 콘솔창에 나타났다.

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

뭐라는거야..~

대충 설명하면 새로 나온 리액트 18에서는 ReactDOM.render가 아닌,
createRoot를 사용해야 한다는 것 같다.

쥐도 새도 모르게.. 버전이 업데이트 되었구나..

📍 핸들링

리액트 공식문서를 참고하여, 다음과 같이 코드를 바꾸었다.
https://ko.reactjs.org/docs/concurrent-mode-reference.html#createroot

// 기존 React 17 

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

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById('root')
);

이전의 코드는 이러했지만, react 18부터는 다음과 같이 작성하도록 하자.

// 변경된 React 18 

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

const rootNode = document.getElementById('root');

ReactDOM.createRoot(rootNode).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

ReactDOM의 import가 변경되었고,
createRoot(rootNode)가 ReactDOM과 render 사이에 들어가게 되었다.

위와 같이 코드를 고치니, 에러 메세지가 없어졌다.


참고 !
리액트 공식문서


마지막으로 ~

< 개똥이는 오늘도 성장한다 ~ >
profile
유연한 사고로 빠르게 습득하기.

0개의 댓글