react로 쇼핑몰 만들기(4) - Product 불러오기

Product 데이터 가져오기(fake store api)

가짜 쇼핑몰 api 활용하기:  https://fakestoreapi.com/

products.slice.js의 코드입니다.

해당 slice를 store폴더의 index.js에 등록합니다.

 

左) CardList.jsx의 코드입니다. 여기서 방금 productsSlice의 fetchProducts를 사용합니다.

右) CardList.module.scss의 코드입니다.

CardList.jsx를 HomePage폴더의 index.jsx에 등록합니다.

 

CardItem 컴포넌트 생성하기

左) cart.slice.js의 코드입니다.

右) 해당 slice를 store폴더의 index.js에 등록합니다.

CardItem.jsx의 코드입니다.

상품을 장바구니에 담으면 더 이상 버튼을 클릭하지 못하게 해서 productMatching을 사용했습니다.

.some()메소드는 조건 중 단 하나라도 부합하면 통과할 수 있다는 겁니다.

 

각 카테고리 상품 정보 불러오기

products.slice.js의 수정 코드입니다.

category있을 시 해당 category만 불러오고, 없을 시 전체를 불러옵니다.

CardList.jsx의 추가 코드입니다.

 

각 카테고리 상품 수 표시하기

左) CountProducts.jsx의 코드입니다.

右) CountProducts.module.scss의 코드입니다.

HomePage폴더안의 index.jsx의 추가 코드입니다.

 

상품 스켈레톤 생성하기

左) CardSkeleton.jsx의 코드입니다. Skeleton는 react에서 제공해주는 양식을 사용합니다.

右) CardList.jsx의 추가 코드입니다. isLoading이 true일때 CardSkeleton컴포넌트를 불러옵니다.

CardSkeleton.module.scss의 코드입니다.