4. 쇼핑몰 웹사이트 만들기 (12)

수작업으로 하면 너무 힘들다...ㅜㅜ

 

.map()을 이용해서 자동으로 그려주겠다!!

 

<ProductAll .js 의 일부>

productList에 map을 할겁니다.이안에는 item이 있다.  이 각각의 item이 {}

productList에 들어있는 아이템 하나하나가 카드에 들어가게 된다.

props로 item에서 item로 넘겨준다.

 

최종

productList 아이템이 있는 개수 만큼 ProductCard가 생기게 될것이다.

 

<결과> (확대한 화면)

 

아직은 아이템들이 다 똑같이 생겼다

이제 사진을 데이터에 맞춰서 값을 바꿔주면 되지!

 

const ProductCard = ({ item }) => { }

=> ProductCard에서 item이라는 값, 데이터를 받아준다. 

item이 있으면 이미지인 img를 보여주세요

item이 있으면 제목인 title을 보여주세요

item이 있으면 가격인 price를 보여주세요

 

<결과>

축소한 화면

 

 

지금 모든 아이템이 신제품이라고 되어있는데 사실은 모두 다 신제품은 아님...

"new":true 이면 신제품이라고 표시를 하고, "new":false 이면 신제품이 아니라고 표시해주기!

 

 

<결과>

축소한 하단 일부

 

<알고리즘 단계>

//1. 전체 상품 페이지, 로그인 페이지, 상품상세 페이지 - 3개의 페이지 (가 필요) -완료-

//1-1. 네비게이션 바 (만들기.생성) !!!  -완료- 

//2. 전체 상품 페이지에서는 전체 상품을 볼 수 있다.   -완료-

//3. 로그인 버튼을 누르면 로그인 페이지가 나온다.

//4. 상품 디테일을 눌렀으나, 로그인이 안되어있을 경우에는 로그인 페이지가 먼저 나온다.

//5. 로그인이 되어있을 경우에는, 상품 디테일(상세) 페이지를 볼 수 있다.

//6. 로그아웃 버튼을 클릭하면 로그아웃이 된다.

//7. 로그아웃이 되면 상품 디테일(상세) 페이지를 볼 수 없고 다시 로그인 페이지가 보인다.

//8. 로그인을 하면 로그아웃이 보이고 로그아웃을 하면 로그인이 보인다.(상단 오른쪽)

//9. 상품을 검색할 수 있다.