React_Childeren props 사용하기

React

React에서는 Children props라는 것을 제공한다. 

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
const firstBook = {
  author: 'Charles Dickens',
  title: 'Interesting Topics',
  img: './images/book-1.jpg',
};

const secondBook = {
  author: 'Laura Dave',
  title: 'The Last Thing He Told Me: A Novel Paperback – March 21, 2023',
  img: './images/book-2.jpg',
};

const BookList = () => {
  return (
    // you should create className property in React
    <section className='booklist'>
      <Book
        author={firstBook.author}
        title={firstBook.title}
        img={firstBook.img}
      >
        <p>This is about...</p>
        <button>Click me</button>
      </Book>
      <Book
        author={secondBook.author}
        title={secondBook.title}
        img={secondBook.img}
      />
    </section>
  );
};

const Book = (props) => {
  // Childeren is special props from React
  const { img, title, author, children } = props;
  console.log(props);
  return (
    <article>
      {/* Dynamically render title */}
      <img src={img} alt={title} />
      <h2>{title}</h2>
      <h4>{author}</h4>
      {children}
    </article>
  );
};

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

root.render(<BookList />);