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

<결과>

 

이제 데이터를 UI에 보여주는 일만 남았다!

 

console.log를 지우고 그 자리에 setProductList(data);를 작성한다.

UI에 보여주는건 useState에 저장해야한다!!

setProductList = 프로덕트를 데이터로 설정

ProductList에 데이터가 잘 있으면 그것을 보여주기 위해 디자인을 한 후 거기에 array를 입혀준다.

 

 

<이제 카드를 한번 디자인을 해보자!!>

 

카드 하나하나는 컴포넌트이다. 

카드 컴포넌트를 만들어보자!!

 

 

 

H&M 홈페이지

 

 

 

ProductAll 페이지에서 ProductCard를 사용하겠다!

return 밑에 있는 <ProductCard/>를 냅다 불러온다.

왜냐하면 우리가 카드를 어떻게 생겼는지 봐야하기 때문!

 

<결과>

 

이제 이 카드를 여러개 보여주면 된다!

 

1. 카드들이 가운데에 있다.

2. 한 줄에 아이템이 4개씩있다.

3. 2번의 상황에서 inspector(검사) 창을 크게 하면 왼쪽에 카드가 한 개만 보인다.

3번 예시