엘리먼트 렌더링 버전 차이로 생긴 오류와 해결

import React from "react";

function Clock(props) {

  return (

    <div>

      <h1>안녕, 리액트!</h1>

      <h2>현재 시간: {new Date().toLocaleTimeString()}</h2>

    </div>

  );

}

export default Clock;

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

// import App from './App';

import reportWebVitals from './reportWebVitals';

// import Library from './chapter_03/Library';

import Clock from './chapter_04/Clock';

const root = ReactDOM.createRoot(document.getElementById("root"));

//setInterval() 함수는 1,000ms(1초)마다 새롭게 Clock컴포넌트를 root div에 렌더링 하도록 코드를 수정

setInterval(() => {

  root.render(

    <React.StrictMode>

      <Clock></Clock>

    </React.StrictMode>

  );

}, 1000);

// const root = ReactDOM.createRoot(document.getElementById('root'));

// root.render(

//   <React.StrictMode>

//     <Library />

//   </React.StrictMode>

// );

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

 

여기서

const root = ReactDOM.createRoot(document.getElementById("root"));

 

를 사용해서 나오는 18버전이지만

17버전인 책은

//setInterval() 함수는 1,000ms(1초)마다 새롭게 Clock컴포넌트를 root div에 렌더링 하도록 코드를 수정

setInterval(() => {

  ReactDOM.render(

    <React.StrictMode>

      <Clock></Clock>

    </React.StrictMode>,

    document.getElementById("root")

  );

}, 1000);

이렇게 하면

오류가 난다.

Uncaught runtime errors:

×

ERROR

react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function at http://localhost:3000/static/js/bundle.js:124:49

ERROR

react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function at http://localhost:3000/static/js/bundle.js:124:49

ERROR

react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function at http://localhost:3000/static/js/bundle.js:124:49

이거는 버전이 달라서 오류가 난 거기 때문에 

import에 client만 지우면

17버전 그대로 적용이 된다. 

리액트 버전을 잘 확인하고 실행하는 게 좋다.

처음에는 오류가 계속나서 빡쳤는데.. dom 경로가 이상하다고 해서 

교수님이랑 동기분들이 잘 봐주신 덕에 오류를 잘 찾아내고 왜이런지를 알게되어서 뜻 깊은 부분이었다.