[동적라우팅]다중필터 처리하기 (2편:Query Parameter를 사용해보자)
이번에는 좌측에 위치한 필터들을 클릭했을 때, 해당 필터에 해당하는 제품들을 보여주는 기능을 구현해보고자 한다.
한 번 클릭하면 필터가 활성화되고, 두 번 클릭하면 해제되는 형태이다. 토글등등 다양한 방법을 고민해보았는데, 결국 아래 3단계로 완료할 수 있었다.
1. 필터리스트 스테이트 관리
const handleFilter = e => {
let filterArr = filters;
filterArr.indexOf(e.target.id) === -1
? filterArr.push(e.target.id)
: filterArr.splice(filterArr.indexOf(e.target.id), 1);
setFilters(filterArr);
setQueryParameter();
};
필터를 클릭할때마다 state로 선언한 filters에 핕터목록을 배열로 넣어준다. 단 이미 해당 필터가 들어있을때에는 splice로 제거한다.
2. 백엔드에 GET요청할 URL 생성
const setQueryParameter = () => {
let queryParameter = '';
let addParamFilters = [];
if (filters) {
filters.forEach(filter => {
addParamFilters.push(`${param}-${filter}`);
});
queryParameter = `${API.productList}${param}&sub=${addParamFilters}`;
} else {
queryParameter = `${API.productList}${param}`;
}
setUrl(queryParameter);
};
1번에서 만든 필터를 백엔드와 약속한 형태로 전처리한 후 url이라는 state를 최신화한다.
3. useEffect로 렌더링 요청
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(product => {
setProducts(product.result);
setSubtotal(product.count);
});
}, [url]);
url값이 바뀔때마다 바뀐 url로 fetch를 요청하도록 useEffect를 작성.
4. 총평
일견 괴랄한 코드이나 백엔드와 통신해보니 잘굴러갑니다.
작성 중 useEffect구문 내에서 dependency이슈로 에러가 있었는데, fetch에서 가져오는 url을 하단 의존성배열에 넣어 해결하였습니다.
코드리뷰이후 변경될 경우 해당 코드의 문제점 및 보완사항도 3부작으로 업데이트하고자합니다.
그럼 아디오스
Author And Source
이 문제에 관하여([동적라우팅]다중필터 처리하기 (2편:Query Parameter를 사용해보자)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gonkang_jeondosa/동적라우팅다중필터-처리하기-2편Query-Parameter를-사용해보자저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)