[React] react 기본 구조 이해

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

function Library(props){

    return (
        <div>
            <Book name = "new 파이썬" numOfPage={300} />
            <Book name = "new AWS" numOfPage={400} />
            <Book name = "new 리액트" numOfPage={500} />
        </div>
    );
}
export default Library;

import React from "react";


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

    );


}
export default Book;

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

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

function tick() {
  const element = (
    <div>
      <h1>Hi, React!</h1>
      <h2>현재 시간 : {new Date().toLocaleTimeString()}</h2>
    </div>
  );

  root.render(element); // root.render를 사용하여 렌더링
}

setInterval(tick, 1000);

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

요약
React 컴포넌트 구조화

Library: 여러 책 정보를 보여주는 컴포넌트.
Book: 책의 이름과 페이지 수를 표시하는 컴포넌트.
Library는 Book 컴포넌트를 재사용하여 여러 데이터를 렌더링.
ReactDOM과 렌더링

ReactDOM.createRoot: React 애플리케이션의 루트를 생성.
root.render: React 컴포넌트를 DOM에 렌더링.
JSX를 사용한 UI 업데이트

JSX 문법으로 동적인 데이터를 렌더링.
예: 현재 시간을 new Date().toLocaleTimeString()으로 표시.
setInterval로 주기적인 UI 갱신

setInterval: 매초 tick 함수를 호출하여 현재 시간을 갱신.
React는 변경된 부분만 효율적으로 업데이트.
React 컴포넌트 조합

컴포넌트를 작은 단위(Book)로 나누고 이를 조합(Library)하여 큰 컴포넌트를 구성.
주요 결과
동적인 시계 구현: 매초 시간이 갱신되는 화면 렌더링.
React 컴포넌트의 재사용: 책 데이터를 반복적으로 표시하는 구조 학습.
ReactDOM의 역할 이해: React 애플리케이션이 DOM과 상호작용하는 방식을 이해.