React - Children 사용하기

React에서 Children은 재사용을 위해서 사용된다

function BookList() {
  return ( 
    <section className='booklist'>
      <Book 
        img={firstBook.img} 
        title={firstBook.title}
        author={firstBook.author} 
      >
        <p>
          Lorem ipsum dolor sit amet 
          consectetur adipisicing elit.
          Minima nulla quasi obcaecati 
          aperiam quidem molestias ipsum 
          nisi, sunt quia porro.
        </p>
      </Book>
      <Book 
        img={secondBook.img}
        title={secondBook.title}
        author={secondBook.author}
      />
    </section>
  );
}

위 코드에서

<Book> </Book> 사이에 children으로 전달할 입력값이 들어간다

const Book = (props) => {
  return (
    <article className="book">
      <img src={props.img} alt='' />
      <h1>{props.title}</h1>
      <h4>{props.author}</h4>
      {props.children}
    </article>
  )
}

그리고 Book변수에서

{props.children} 으로 호출하여 사용한다.