React/E-commers App
의류 쇼핑몰 30 | shop-data.json
CodeMia
2022. 6. 30. 19:40
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 페이지에 가면 다음과 같은 화면이 나온다.
