상품 관리 사이트를 구현
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
복사