리액트 기초 (반복문 2)

hat_component라는 파일 생성 시켜서 src에 component 라는 폴더 만들고 src > component > common 폴더 만들고 common 안에 4개

Footer.js

import "./footer.css";

const Footer = () => {
  return (
    <div className="footer">
      <div>여기는 footer</div>
    </div>
  );
};
export default Footer;

Header.js

import "./header.css";

const Header = () => {
  return (
    <div className="header">
      <div>모자팜</div>
    </div>
  );
};
export default Header;

footer.css

.footer {
  background-color: #eee;
  padding: 30px;
}
.footer > div {
  width: 1200px;
  margin: 0 auto;
}

header.css

.header {
  background: #c21500; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #ffc500,
    #c21500
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #ffc500,
    #c21500
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding: 25px;
  color: #fff;
  font-weight: bold;
  font-size: 30px;
}

그다음 src > component > product 라는 폴더 만들고 product 폴더 안에 4개

 

ProductList.js

import "./productList.css";

const ProductList = (props) => {
  const productList = props.productList;
  //console.log(productList);
  const changeLike = props.changeLike;
  return (
    <div className="product-list">
      {productList.map((product, index) => {
        return (
          <Product
            key={"product" + index}
            product={product}
            changeLike={changeLike}
            index={index}
          />
        );
      })}
    </div>
  );
};
const Product = (props) => {
  const product = props.product;
  const changeLike = props.changeLike;
  const index = props.index;

  //console.log(product);
  return (
    <div className="product">
      <div className="product-img">
        <img src={product.img}></img>
        <div className="like-zone">
          <Likes likes={product.likes} changeLike={changeLike} index={index} />
          {/* index 빼줌 oldChangeLike 때 */}
        </div>
      </div>
      <div className="product-info">
        <div className="product-title">{product.productTitle}</div>
        <div className="product-price">{product.productPrice}</div>
        <div className="star-rate">
          <StarRate star={product.star} />
        </div>
      </div>
    </div>
  );
};
const StarRate = (props) => {
  const star = props.star;
  const starRate = () => {
    const arr = new Array();
    for (let i = 0; i < star; i++) {
      arr.push(<span className="material-icons">star</span>);
    }
    return arr;
  };
  return <>{starRate()}</>;
};

const Likes = (props) => {
  const likes = props.likes;
  const changeLike = props.changeLike;
  const index = props.index;
  return (
    <span
      className="material-icons"
      onClick={() => {
        changeLike(index);
      }}
    >
      {likes === 0 ? "favorite_border" : "favorite"}
    </span>
  );
};
export default ProductList;

Title.js

import "./title.css";

const Title = () => {
  return (
    <div className="title">
      <span className="material-icons">local_fire_department</span>
      <span className="material-icons">local_fire_department</span>
      <span>인기상품</span>
      <span className="material-icons">local_fire_department</span>
      <span className="material-icons">local_fire_department</span>
    </div>
  );
};

export default Title;

productList.css

import "./title.css";

const Title = () => {
  return (
    <div className="title">
      <span className="material-icons">local_fire_department</span>
      <span className="material-icons">local_fire_department</span>
      <span>인기상품</span>
      <span className="material-icons">local_fire_department</span>
      <span className="material-icons">local_fire_department</span>
    </div>
  );
};

export default Title;

title.css

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0px;
  /* 상하패딩:50px 좌우패딩0px*/
}
.title > span {
  font-size: 1.5em;
}
.title > span.material-icons {
  color: #ff6a00;
}
.title > span:not(.material-icons) {
  font-weight: bold;
}

App.js

import Header from "./component/common/Header";
import Footer from "./component/common/Footer";
import Title from "./component/product/Title";
import { useState } from "react";
import "./shop.css";
import ProductList from "./component/product/ProductList";

function App() {
  const [productList, setProductList] = useState([
    {
      productNo: 1,
      productName: "놀부모자",
      img: "/image/product1.jpeg",
      productPrice: 19900,
      star: 4,
      likes: 1,
    },
    {
      productNo: 2,
      productName: "해바라기모자",
      img: "/image/product2.jpeg",
      productPrice: 25600,
      star: 3,
      likes: 0,
    },
    {
      productNo: 3,
      productName: "파라오모자",
      img: "/image/product3.jpeg",
      productPrice: 23800,
      star: 5,
      likes: 1,
    },
    {
      productNo: 4,
      productName: "붕어빵모자",
      img: "/image/product4.jpeg",
      productPrice: 15600,
      star: 2,
      likes: 0,
    },
  ]);
  const changeLike = (index) => {
    const newProductList = [...productList];
    const likesStatus = newProductList[index].likes;
    const changeStatus = likesStatus === 0 ? 1 : 0;
    newProductList[index].likes = changeStatus;
    setProductList(newProductList);
  };
  return (
    <div className="wrap">
      <Header />
      <div className="content">
        <Title />
        <ProductList productList={productList} changeLike={changeLike} />
      </div>
      <Footer />
    </div>
  );
}

export default App;

임포트 된 shop.css

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.wrap > div {
  width: 100%;
  box-sizing: border-box;
}
.content {
  flex: 1;
  padding: 50px; 
}