src 폴더 안에 shop-data.json 파일을 만들고
내용을 넣었다.
[
{
"id": 1,
"name": "Brown Brim",
"price": 25
},
{
"id": 2,
"name": "Blue Beanie",
"price": 18
},
{
"id": 3,
"name": "Brown Cowboy",
"price": 35
},
{
"id": 4,
"name": "Grey Brim",
"price": 25
},
{
"id": 5,
"name": "Green Beanie",
"price": 18
},
{
"id": 6,
"name": "Palm Tree Cap",
"price": 14
},
{
"id": 7,
"name": "Red Beanie",
"price": 18
},
{
"id": 8,
"name": "Wolf Cap",
"price": 14
},
{
"id": 9,
"name": "Blue Snapback",
"price": 16
}
]
route 폴더에 shop 폴더와 파일을 만든다.
shop 페이지를 만들어 보자.
SHOP_DATA를 map으로 돌린다.
destructuring을 하고
App.js로 가서
임시로 적어 둔 Shop 컴포넌트를 지우고 import를 해준다.
shop 페이지에 가면 다음과 같은 화면이 나온다.
'React > E-commers App' 카테고리의 다른 글
| 의류 쇼핑몰 32 | product-card 만들기 (0) | 2022.07.01 |
|---|---|
| 의류 쇼핑몰 31 | products.context.jsx 만들기 (0) | 2022.07.01 |
| 의류 쇼핑몰 28 | Auth Listener (0) | 2022.06.29 |
| 의류 쇼핑몰 25 | Context 2 | context에 데이터 입력과 출력 (0) | 2022.06.18 |
| 의류 쇼핑몰 24 | Context 1 | 쓰는 이유 (0) | 2022.06.18 |
댓글