위코드 1차 프로젝트를 진행하며 많은 부분이 힘들고 어려웠지만 서버 단에서 리소스를 받아 화면에 렌더링하는 부분을 많이 맡았던 난 서버에서 데이터를 어떻게 받아서 가공하는 지에 많은 시간을 쏟았다.
서버에서 데이터를 통으로 받아서 프론트 단에서 가공해서 써야될 때가 왕왕 있다.
사실 통 데이터로 작업해보고 싶은 마음에 mock data 또한 통 데이터 형식으로 만들어서 작업했다ㅎㅎ
통 데이터는 객체들로 이루어진 배열로 생겼는데 안의 객체 키들은 전부 일치할 것이고 그 키에 해당하는 값들은 중복되어 있을 것이다.
이때 중복된 데이터들을 하나씩만 남기고 삭제한다면 카테고리별로 데이터가 하나씩 남기 때문에 카테고리 갯수 혹은 카테고리 별 배열을 생성할 수 있기 때문에 엄청 x 100 유용하게 썼다.
// listData 안에서 useParams()로 받은 main_category_name과 동일한 값을 mainCategoryList 안에 저장.
const mainCategoryList = listData.filter(
el => el.main_category_name.toLowerCase() === `${main_category_name}`
);
// mainCategoryList 안에서 sub_category_id를 기준으로 중복 제거.
// 그럼 sub_category_id 별로 하나씩만 남겠지 그걸 subCategoryList에 저장
// 그럼 subCategoryList에는 sub_category 갯수만큼의 객체 배열이 저장되겠지.
const subCategoryList = mainCategoryList.reduce(function (acc, current) {
if (
acc.findIndex(
({ sub_category_id }) => sub_category_id === current.sub_category_id
) === -1
) {
acc.push(current);
}
return acc;
}, []);