JSX 입문 강의 질문입니다.

JSX를 각각 Book, Library로 만들고 index.js 단에 app 부분을 Library로 바꿨음에도 작동이 안 되고 있습니다. 객체 지정 대부분을 앞에 대문자로 주었음에도 오류는 똑같이 빈 화면이 뜨는 오류가 발생하고 있습니다.

코드는 하단에 작성해놓겠습니다.

- 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

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';

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

안녕하세요, 안광무님. 소플입니다.

강의에서 사용한 리액트 버전과 실제 실습에서 사용하시는 리액트 버전이 달라서 발생하는 문제인 것 같습니다.

아래 코드와 같이 createRoot를 사용하는 방식으로 한 번 해보시기 바랍니다.

그리고 앞으로 실습하실 때 아래 리액트 v18기준으로 작성된 실습 코드를 참고하시면 좋을 것 같습니다!

https://github.com/soaple/first-met-react-practice-v18

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';

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

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