React JSX 실습

■ React JSX 실습

1. 생성한 myapp 폴더 열기
2. chapter03 폴더 생성
3. Book.jsx 파일 생성
   

   import React from "react";
   
   function Book(props) {
       return (
           <div>
               <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
               <h2>{`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`}</h2>
           </div>
       )
   }
   
   export default Book;

   # book 컴포넌트는 props로 name과 numofpage를 받아서 이를 출력하는 컴포넌트다.
   # 템플릿 리터럴은 백틱(` )을 사용하고 `${} 구문을 사용하여 변수를 삽입해야 한다. '(큰따옴표) 아님!!
4. 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;

   # library 컴포넌트는 총 3개의 book 컴포넌트를 랜더링하고 있다.
   
   
   
5. 만든 컴포넌트를 실제 화면에 랜더링 하기 위해 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';
   
   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();

   
   
   

---

- 실행 시 출력 화면

---

인프런 - 처음-만난-리액트

 

# JSX를 사용하지 않고 React 컴포넌트 코드를 작성하게 되면 코드의 양도 늘어나고 가독성도 떨어지게 된다.