쇼핑몰 사이트 만들기30(데이터베이스에서 가져온 상품 정보들을 화면에서 보여주기)

저번에는 뿌려준 데이터들을 가져오기만 하였는데요. 그래서 요번에는 상품 카트 페이지에 해당하는 UI를 보이게하고 거기에 데이터들을 뿌려주는 작업을 해주도록하겠습니다.

순서를 말하자면, 

1. CartPage를 위한 UI 만들기 -> UserCardBlock Component

2. 데이터베이스에서 가져온 데이터를 브라우저에서 보여주기

3. 카트 안에 있는 상품 총 금액 계산 -> item price x quantity

4. 카트에서 제거하는 기능 만들기

 

일단 첫번째 단계인 UI에서 카트에 들어간 상품 정보들을 보이게하는 부분은 컴포넌트를 만들어서 보이게 해줄텐데요. 컴포넌트 이름은 UserCardBlock Component로 해주겠습니다.

 

 

UserCardBlock.js

 

 

결과: