Module not found: Error: You attempted to import ..

Module not found: Error: You attempted to import ..

 

오류에서 

 

import 할 폴더를 ,

디렉토릴 src 안으로 옴기면 된다.

 

또 다른 오류가 났다.

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 ./src/index.js (http://localhost:3000/static/js/bundle.js:354:47) at options.factory (http://localhost:3000/static/js/bundle.js:41710:31) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:41134:33) at http://localhost:3000/static/js/bundle.js:42356:37 at http://localhost:3000/static/js/bundle.js:42358:12

 

index.js

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

import Library from "./chapter03/Library";
ReactDOM.render(
    <React.StrictMode>
        <Library/>
    </React.StrictMode>,
    document.getElementById('root')
);

// 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();

에서 

 

import ReactDOM from 'react-dom/client';

ㅇ에서 

import ReactDOM from 'react-dom';

ㅇ로  바꿔주니까

 

두 개의 코드 스니펫은 거의 동일하지만 첫 번째 import 문에서 차이가 있습니다. 첫 번째 코드 스니펫은 import ReactDOM from 'react-dom/client'를 사용하고, 두 번째 코드 스니펫은 import ReactDOM from 'react-dom'을 사용합니다.

이 import 문의 차이는 React 및 관련 라이브러리의 구조와 구성 방식의 변경으로 인한 것으로 보입니다. 

예전 버전의 React에서는 ReactDOM 모듈이 여러 개의 패키지로 분리되어 있었으며, 클라이언트 측 렌더링 버전은 react-dom/client를 사용하여 가져왔습니다. 

 

그러나 최신 버전의 React에서는 이 클라이언트 측 렌더링 기능이 react-dom 메인 패키지에 통합되어 react-dom/client 모듈이 더 이상 필요하지 않아졌습니다.

따라서 최신 버전의 React와 호환되도록 두 번째 코드 스니펫을 사용하는 것이 좋습니다. 이 코드는 react-dom에서 ReactDOM을 가져오므로 더 최신이며 미래에 대비할 수 있습니다.

 

결론,

 

최근에는

 

 

import ReactDOM from 'react-dom'; 을 사용한다 이건데 흠,

---

import ReactDOM from 'react-dom/client'

import ReactDOM from 'react-dom'

 

의 차이점이 무엇인가? 에 대해서는,

 

 

ReactDOM 라이브러리는 실제로 ReactDOM.render() 메서드에서 사용됩니다. 이 메서드는 Library 컴포넌트를 DOM에 렌더링하기 위해 사용됩니다. 이 메서드는 두 개의 인수로 호출됩니다. 첫 번째 인수는 렌더링할 컴포넌트를 나타내는 React 엘리먼트입니다. (<Library /> 이 경우), 두 번째 인수는 컴포넌트를 렌더링해야 할 DOM 요소입니다.(document.getElementById('root') 이 경우)

---

reportWebVitals() 는 무엇인가?

ReactDOM.render() 메서드 호출 뒤에 오는 reportWebVitals() 함수는 ReactDOM 라이브러리와 직접적으로 관련이 없습니다. 대신, 이 함수는 애플리케이션의 성능을 측정하고 보고하는 데 사용됩니다. 이 함수는 성능 지표를 콘솔에 로그하거나 분석을 위해 분석 엔드포인트로 보낼 수 있습니다.

 

Book.jsx

import React from "react";

function Book(props) {
    return(
        <div>
            <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
            <h2>{`이 책은 총 ${props.numOfPage}페이지로 이뤄져있다.`}</h2>
        </div>
    )
}

export default Book;

Library.jsx

import React from "react";
import Book from "./Book";

function Library(props) {
    return (
        <div>
            <Book name="처음 만난 파이썬" numOfPage={300}/>
            <Book name="처음 만난 AWS" numOfPage={400}/>
            <Book name="처음 만난 리액트" numOfPage={500}/>
        </div>
    );
}

export default Library;

 

을 통하여 index.js를 통하여 불러와서 

 

로 잘 나타낸것을 볼수있었다.

 

정리,