상품 관리 FrontEnd (React)

상품 관리 사이트를 구현

React 로 상품 목록 페이지 구현

Card.jsx

import React, { useState } from 'react'
import { Favorite, FavoriteBorder } from "@mui/icons-material";

// const Card = (props) => {
// const Card = ({title, content}) => {
const Card = ({ card }) => {
  const { no, title, content, likes, img } = card
  
  // ⭐ state 선언
  const [like, setLike] = useState(false)
  const [count, setCount] = useState(likes)

  // ⭐ 이벤트 핸들러
  const handleLike = () => {
    setLike( !like )
    setCount( !like ? count+1 : count-1 )
    console.log(`like : ${like}`)
  }


  return (
    <div style={{
        border: "1px solid #ddd",
        borderRadius: "10px",
        overflow: "hidden",
        boxShadow: "0 5px 10px rgba(0,0,0,0.2)",
        margin: "0 20px"
    }}>
        {/* 상품 이미지 */}
        <img src={ img } width={300} height={200} 
          style={{ objectFit: 'contain' }}
          alt="상품이미지" />
        {/* 컨텐츠 */}
        <div style={{ padding: "10px" }}>
            <h3 style={{ fontSize: "20px", fontWeight: "bold" }}>
              {/* {props.title} */}
              { title }
            </h3>
            <p style={{ color: "#666", fontSize: "14px" }}>
              {/* {props.content} */}
              { content } 
            </p>
            <button 
              style={{ 
                border: "none", 
                backgroundColor: "transparent",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
              onClick={ handleLike }

            >
              {
                like ?
                  <Favorite style={{ 
                      color: "#ff4757", 
                      fontSize: "40px" 
                  }} />
                :
                  <FavoriteBorder style={{ 
                      color: "#ff4757",
                      fontSize: "40px"
                  }} />
              }
                <span style={{
                    marginLeft: "5px",
                    fontSize: "24px"
                }}>
                  { count }
                </span>
            </button>
        </div>
    </div>
  )
}

export default Card
JavaScript
복사

CardList.jsx

import React, { useEffect, useState } from 'react'
import Card from './Card'

const CardList = () => {

  // Card 컴포넌트에 전달할 데이터
  const cardData = [
    { 
      no : 1,
      title: '아메리카노',
      content: '콜롬비아 원두로 만든...',
      likes: 100,
      img: 'https://i.imgur.com/D1ic2Xk.jpg'
    },
    { 
      no : 2,
      title: '카페라떼',
      content: '라떼는 말이야...',
      likes: 200,
      img: 'https://i.imgur.com/hAzIEVv.jpg'
    },
    { 
      no : 3,
      title: '쿠키프라페',
      content: '오레오 다햇네...',
      likes: 300,
      img: 'https://i.imgur.com/kDhIhLv.jpg'
    },
  ]

 
  
  // ❔ useEffect() 훅 사용
	// "렌더링 시 호출 되는 함수"
	// : 함수형 컴포넌트에서 마운트, 업데이트, 언마운트 생명주기 작업을 
	//   처리할 수 있도록 해주는 훅
	useEffect(() => {
    getProductList();
  }, []);

  return (
    <div>
      <h1>상품 목록</h1>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(4, auto)",
        rowGap: "40px"
      }}>
        {
          cardData.map( (card, index) => {
            // return <Card key={card.no} title={card.title} content={card.content} />
            // return <Card key={card.no} {...card} />
            return <Card key={card.no} card={ card } />
          })
        }
      </div>
    </div>
  )
}

export default CardList
JavaScript
복사