React_간단한 list 구현

React

목표

index.js

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

// import CSS file from current working directory
import './index.css';

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

const Book = () => {
  return (
    <article>
      <Image />
      <Title />
      <Author />
    </article>
  );
};

const Image = () => (
  <img src='https://m.media-amazon.com/images/I/419w5NTEsXL._PJku-sticker-v7,TopRight,0,-50._SY300_.jpg'></img>
);
const Title = () => <h2>Oliver Twist</h2>;
const Author = () => {
  return <h4>Charles Dickins</h4>;
};

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

root.render(<BookList />);

북 리스트를 하드코딩한 것이다. 

컴포넌트 구조는 Image, Title, Author이 모여서 Book 컴포넌트의 article 태그 내 포함된다. Book 컴포넌트들이 모여서 BookList 컴포넌트가 된다.

CSS 적용하기

임시로 같은 디렉터리에 CSS 파일을 만들어주고 사용할 js 파일에서 import 해주면 된다. 위에서 미리 import 해주었다.

/* /src/index.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background: #f1f5f8;
  color: purple;
}

.booklist {
  width: 90vw;
  max-width: 1170px;
  margin: 5rem auto;
  display: grid;
  gap: 2rem;
}

@media screen and (min-width: 768px) {
  .booklist {
    grid-template-columns: repeat(3, 1fr);
  }
}

.book {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
}

.book img {
  width: 100%;
  object-fit: cover;
}

.book h2 {
  margin-top: 1rem;
  font-size: 1rem;
}