[Error Handling Log] 전시회 목록불러오는 axiosGET 요청 시 다양한 기능 중첩시키기(필터, 정렬, 검색) / 박지영

- Gallery 페이지에서 전시회 목록 가져올 때, 필터와 정렬기능을 한꺼번에 수행하는 방법
- axios GET 요청을 보내는 함수의 전달인자로 필터와 정렬을 담당하는 상태값을 넣고,
- GET요청을 보낼때마다 받게되는 전체 데이터에서, 필터와 정렬을 거친 정제된 데이터로 변환시킨다.(아래 코드. 먼저 배열값은 파싱하고 —> 필터인지 아닌지 나누고 —> 정렬함)

```jsx
export async function getStandardGallery(tagClicked, sortValue) {
try {
let res = await axios.get(
"https://localhost:5000/exhibition/1" //파라미터 요청(standard) & 승인이 된 것만(status=1)
);

let result = res.data.data.map((el) => {
return { ...el, genre_hashtags: JSON.parse(el.genre_hashtags) };
}); // 배열 파싱하고
if (tagClicked === "전체") {
if (sortValue === "최신순") {
return result.sort(
(a, b) => new Date(b.createdAt) - new Date(a.createdAt)
);
} else {
//전시마감일순
return result.sort(

(a, b) => new Date(a.end_date) - new Date(b.end_date)
);
}
} else {
//태그 필터링

result = result.filter((el) => el.genre_hashtags.includes(tagClicked));
if (sortValue === "최신순") {
return result.sort(
(a, b) => new Date(b.createdAt) - new Date(a.createdAt)
);

} else {
//전시마감일순
return result.sort(
(a, b) => new Date(a.end_date) - new Date(b.end_date)
);
}
}
} catch (err) {
return console.log(err.message);
}
}
```

- 그리고 상태값들이(`isStandard`, `tagClicked`, `sortValue`) 변할 때마다 GET요청을 보내야 하므로, useEffect 함수 내 의존성 배열로 넣기.

```jsx
useEffect(() => {
async function getAxiosData() {
if (isStandard) {
setGalleryList(await getStandardGallery(tagClicked, sortValue));
console.log((await getStandardGallery(tagClicked, sortValue)));
} else {
setGalleryList(await getPremiumGallery(tagClicked, sortValue));
console.log((await getPremiumGallery(tagClicked, sortValue)));
}
}
setTimeout(() => {
getAxiosData();
}, 100)
setTimeout(()=> {
setLoading(false);
}, 700)
}, [isStandard, tagClicked, sortValue, rerender]);
```


- Review 페이지에서 전시회 목록을 가져올 때, 검색과 정렬기능을 한꺼번에 수행하는 방법
- axios GET 요청을 보내는 함수의 전달인자로 검색과 정렬을 담당하는 상태값을 넣고,
- GET요청을 보낼때마다 받게되는 전체 데이터에서, 검색과 정렬을 거친 정제된 데이터로 변환시킨다.(아래 코드. 먼저 검색할 때 안 할 때로 나누고—> 최신순/인기순 정렬함)

```jsx
export async function getAllGallery(sortValue, search){ //standard, premium 모든 전시. 승인완료 & 전시마감 모두!

try {
const res = await axios.get(
"https://localhost:5000/review"
);
if(search === ''){ //검색 안 할 때
if(sortValue === '최신순'){
return res.data.data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
} else{ //인기순
return res.data.data.sort((a, b) => (b.comments.length) - (a.comments.length))
}
} else{ //검색
let result = res.data.data.filter((el) => {
return el.title.toLowerCase().includes(search.toLowerCase())
})
if(sortValue === '최신순'){
return result.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
} else{ //인기순
return result.sort((a, b) => (b.comments.length) - (a.comments.length))
}
}
} catch (err) {
return console.log(err);
}
}
```

- 그리고 상태값들이(`search`, `sortValue`) 변할 때마다 GET요청을 보내야 하므로, useEffect 함수 내 의존성 배열로 넣기.

```jsx
useEffect(()=> {
//standard, premium gallery, 마감된 전시 모두 모아서 setGalleryList에 넣기.
async function getAxiosData(){
setGalleryList(await getAllGallery(sortValue, search));
}
setTimeout(()=> {
getAxiosData();
}, 100)
setTimeout(()=> {
setLoading(false);
}, 700)
}, [search, sortValue])
```