아마존 E-commerce 클론 -2) 리액트 만들고 페이지 동적으로 만들기

리액트앱을 시작해보자. 

 

 

amazon-clone폴더에서 npx create-react-app frontend를 실행해준다. 

 

 

 

 

프론트엔드로 가서 npm start를 하면 리액트앱이 실행되는 것을 확인할 수 있다. 

선택한 항목들을 지워준다. 

 

 

여기서 우리가 만든 template안의 index.html 중에서 body태그 안의 내용들을 App.js로 복사 붙여넣기 해준다. 

import React from 'react';

function App() {
  return (
    <div className="grid-container">
          <header class="row">
            <div>
              <a class="brand" href="index.html">amazona</a>
            </div>
            <div>
              <a href="cart.html">Cart</a>
              <a href="signin.html">Sign In</a>
            </div>
          </header>
          <main>
              <div class="row center">
                  <div class="card">
                      <a href="product.html">
                          <img class="medium" src="./images/product-1.jpeg" alt="product"/>
                      </a>
                      <div class="card-body">
                          <a href="product.html">
                              <h2>Nike Slim Shirts</h2>
                          </a>
                          <div class="rating">
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                          </div>
                          <div class="price">
                              $120
                          </div>
                      </div>
                  </div>
                  <div class="card">
                      <a href="product.html">
                          <img class="medium" src="./images/product-1.jpeg" alt="product"/>
                      </a>
                      <div class="card-body">
                          <a href="product.html">
                              <h2>Nike Slim Shirts</h2>
                          </a>
                          <div class="rating">
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                          </div>
                          <div class="price">
                              $120
                          </div>
                      </div>
                  </div>
                  <div class="card">
                      <a href="product.html">
                          <img class="medium" src="./images/product-1.jpeg" alt="product"/>
                      </a>
                      <div class="card-body">
                          <a href="product.html">
                              <h2>Nike Slim Shirts</h2>
                          </a>
                          <div class="rating">
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                          </div>
                          <div class="price">
                              $120
                          </div>
                      </div>
                  </div>
                  <div class="card">
                      <a href="product.html">
                          <img class="medium" src="./images/product-1.jpeg" alt="product"/>
                      </a>
                      <div class="card-body">
                          <a href="product.html">
                              <h2>Nike Slim Shirts</h2>
                          </a>
                          <div class="rating">
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                          </div>
                          <div class="price">
                              $120
                          </div>
                      </div>
                  </div>
                  <div class="card">
                      <a href="product.html">
                          <img class="medium" src="./images/product-1.jpeg" alt="product"/>
                      </a>
                      <div class="card-body">
                          <a href="product.html">
                              <h2>Nike Slim Shirts</h2>
                          </a>
                          <div class="rating">
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                          </div>
                          <div class="price">
                              $120
                          </div>
                      </div>
                  </div>
                  <div class="card">
                      <a href="product.html">
                          <img class="medium" src="./images/product-1.jpeg" alt="product"/>
                      </a>
                      <div class="card-body">
                          <a href="product.html">
                              <h2>Nike Slim Shirts</h2>
                          </a>
                          <div class="rating">
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                              <span><i class="fa fa-star"></i></span>
                          </div>
                          <div class="price">
                              $120
                          </div>
                      </div>
                  </div>
              </div>
          </main>
          <footer class="row center">All right reserved</footer>
        </div>
  );
}

export default App;

 

그리고 style.css의 내용들도 App.css파일안으로 복사해주는데 

원래있던 body안의 

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

내용은 그대로 복사해서 넣어준다. 

code는 삭제한다. 

 

추가로 body태그 아래에 #root로 높이 100%를 주는데 그 이유는 리액트앱의 index.html파일안의 아이디가 root이기 때문이다. 

html {
  font-size: 62.5%; /* 16px x 62.5 = 10px = 1rem */
  box-sizing: border-box;
}
body {
  margin: 0;
  height: 100vh;
  font-size: 1.6rem;
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#root{
  height:100%
}

/* Layout */
.grid-container {
  display: grid;
  grid-template-areas:
    'header'
    'main'
    'footer';
  grid-template-columns: 1fr;
  grid-template-rows: 5rem 1fr 5rem;
  height: 100%;
}
header {
  grid-area: header;
  background-color: #203040;
}
main {
  grid-area: main;
  padding: 1rem;
}
footer {
  grid-area: footer;
  background-color: #203040;
  color: #ffffff;
}
/* Common */
h1 {
  font-size: 1.8rem;
  padding: 1rem 0;
}
h2 {
  font-size: 1.6rem;
  padding: 1rem 0;
}

a {
  text-decoration: none;
}
a:hover {
  color: #ff8000;
}
/* Header */
header a {
  color: #ffffff;
  padding: 1rem;
}
a.brand {
  color: #ffffff;
  font-size: 3rem;
  font-weight: bold;
}
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.row.center {
  justify-content: center;
}
/* Image */
img {
  border-radius: 0.5rem;
}
img.medium {
  max-width: 29rem;
  width: 100%;
}

/* Card */
.card {
  border: 0.1rem #c0c0c0 solid;
  background-color: #f8f8f8;
  border-radius: 0.5rem;
  margin: 1rem;
}
.card-body {
  padding: 1rem;
}
.card-body > * {
  margin-bottom: 0.5rem;
}
.price {
  font-size: 2rem;
}
/* Rating */
.rating span {
  color: #f0c040;
  margin: 0.1rem;
}

 

이미지폴더도 public폴더 안으로 옮겨주면 정상작동한다. 

리액트앱에서도 똑같이 작동한다. 

 

 

이제는 프로덕트에 대한 정보들을 따로 저장해서 페이지를 만듦으로서 

페이지가 정보의 수정에 대해서 동적으로 작동할 수 있도록 해보자. 

 

src폴더안에 data.js파일을 만들어준다. 

안에는 상품에 대한 정보를 넣어준다. 

const data = {
    products: [
      {
        _id: '1',
        name: 'Nike Slim Shirt',
        category: 'Shirts',
        image: '/images/product-1.jpeg',
        price: 120,
        countInStock: 10,
        brand: 'Nike',
        rating: 4.5,
        numReviews: 10,
        description: 'high quality product',
      },
      {
        _id: '2',
        name: 'Adidas Fit Shirt',
        category: 'Shirts',
        image: '/images/product-2.jpeg',
        price: 100,
        countInStock: 20,
        brand: 'Adidas',
        rating: 4.0,
        numReviews: 10,
        description: 'high quality product',
      },
      {
        _id: '3',
        name: 'Lacoste Free Shirt',
        category: 'Shirts',
        image: '/images/product-3.jpeg',
        price: 220,
        countInStock: 0,
        brand: 'Lacoste',
        rating: 4.8,
        numReviews: 17,
        description: 'high quality product',
      },
      {
        _id: '4',
        name: 'Nike Slim Pant',
        category: 'Pants',
        image: '/images/product-4.jpeg',
        price: 78,
        countInStock: 15,
        brand: 'Nike',
        rating: 4.5,
        numReviews: 14,
        description: 'high quality product',
      },
      {
        _id: '5',
        name: 'Puma Slim Pant',
        category: 'Pants',
        image: '/images/product-5.jpeg',
        price: 65,
        countInStock: 5,
        brand: 'Puma',
        rating: 4.5,
        numReviews: 10,
        description: 'high quality product',
      },
      {
        _id: '6',
        name: 'Adidas Fit Pant',
        category: 'Pants',
        image: '/images/product-6.jpeg',
        price: 139,
        countInStock: 12,
        brand: 'Adidas',
        rating: 4.5,
        numReviews: 15,
        description: 'high quality product',
      },
    ],
  };
  export default data;

 

 

상품에 대한 설명을 나타내게 할 때 map기능을 써서 나타나도록 설정할 것이다. 

그다음 App.js를 다음과 같이 수정한다. (div card부터 하나만 남기고 나머지 아이템은 삭제)

이때 {}를 사용하는이유는 리액트 앱안에서 자바스크립트 코드를 사용하기 위해서는 {}가 필요하기 때문이다. 

{} 안에 data.products.map(produt=>())를 작성하고 그 안에 아이템 정보 나열하는 것을 넣어준다. 

map을 사용할때는 key를 넣어줘야 한다. 

          <main>
              <div className="row center">
                {
                  data.products.map(product=>(
                  <div key={product._id} className="card">
                      <a href={`/product/${product._id}`}>
                          <img className="medium" src={product.image} alt={product.name}/>
                      </a>
                      <div className="card-body">
                          <a href={`/product/${product._id}`}>
                              <h2>{product.name}</h2>
                          </a>
                          <div className="rating">
                              <span><i className="fa fa-star"></i></span>
                              <span><i className="fa fa-star"></i></span>
                              <span><i className="fa fa-star"></i></span>
                              <span><i className="fa fa-star"></i></span>
                              <span><i className="fa fa-star"></i></span>
                          </div>
                          <div className="price">
                              ${product.price}
                          </div>
                      </div>
                  </div>
                    
                  ))
                }
              </div>
          </main>

현재상태

 

이제 별을 넣고 싶다면, 

public 폴더안의 index.html에 가서 title윗부분에 별 아이콘의 링크를 넣어줘야 한다. 

    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
  />
    <title>React App</title>
  </head>

 

현재상태

 

 

추가적으로 app.js파일의 링크를 다음과 같이 수정해주자. "/~~~"의형태로 만든다. 

 

import React from 'react';
import data from './data';

function App() {
  return (
    <div className="grid-container">
          <header className="row">
            <div>
              <a className="brand" href="/">amazona</a>
            </div>
            <div>
              <a href="/cart">Cart</a>
              <a href="/signin">Sign In</a>
            </div>
          </header>
          <main>