React_props 간단히 사용하기

React

간단한 프롭 사용하기 코드다.

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

import './index.css';

const author = 'Charles Dickins';
const title = 'Oliver Twist!!!';
const img = './images/book-1.jpg';

const BookList = () => {
  return (
    // you should create className property in React
    <section className='booklist'>
      <Book author={author} title={title} img={img} />
      <Book author={author} title={title} img={img} />
    </section>
  );
};

const Book = (props) => {
  console.log(props);
  return (
    <article>
      {/* Dynamically render title */}
      <img src={props.img} alt={props.title} />
      <h2>{props.title}</h2>
      <h4>{props.author}</h4>
    </article>
  );
};

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

root.render(<BookList />);

BookList 컴포넌트 내 Book 컴포넌트의 author, title, img 프로퍼티에 각 데이터를 넣어주었다. 이렇게 해도 되는 이뉴는 Book 컴포넌트가 props를 받아와서 그에 맞는 HTML 태그의 속성 또는 텍스트로 사용되기 때문이다.