본문 바로가기

IT-사이드 프로젝트

쇼핑몰 사이트 만들기19(라디오 박스 필터 만들기2)

저번에 라디오 박스를 클릭할 때마다 부모 컴포넌트인 LandingPage부분에 가져왔잖아요.

 

 

 

백엔드에다가 요청하는 부분을 만들어주도록하겠습니다.

 

 

이제 할일은 백엔드에서 받은 데이터로 상품들을 화면에 보여주는 부분을 해주겠습니다.

일단 체크박스와 라디오박스를 클릭했을 경우에 정보를 잘 가져오는 확인하기 위해서 console로 출력해주도록하겠습니다.

잘 가져오는 것을 확인할 수 있습니다.

 

product.js

$gte랑 $lte 부분은 mongoDB에 해당하는 부분인데요.

왜 저거를 사용하냐면

금액 범위를 보면 200보다 크거나 같고 249보다 작거나 같게 해줘야하는데 그래서 저부분을 저렇게 해줬습니다.

 

결과:

 

handleFilters 부분에 setFilters를 넣어줌으로써 해결해줬습니다.