🧨 문제의식
JSON 데이터로 만든 new배열 객체에 id 포함하기
Progressing
👉🏻 사용자는 홈에서 해시태그를 다중선택할 수 있습니다.
[Structure]
App > HomePage >
- HomeConditionTagsContainer (어떤 상황인가요?)
- HomeRegionTagsContainer (어디로 가고 싶나요?)
- HomeCategoryTagsContainer (무엇을 드시고 싶으세요?)
[완료한 부분]
- JSON파일에서 restaurants 배열 받아서 카테고리별로 중복값 제거한 배열 새로 생성
- 홈에서 저장된 해시태그들을 볼 수 있게하기
홈에 해시태그를 분류별로(예를들면 상황, 지역, 음식종류 등) 보여주기 위해서
JSON에서 아래와 같이 특정 가게에 대한 정보가 객체로 담긴 배열 받아서 분류별로 중복값 제거한 배열을 새로 생성해야했다.
아래와 같이 App 에서 restaurants JSON을 import 하고,
import restaurants from '../assets/json/restaurants.json';HomePage에서 restaurants를 전달받아서 아래와 같이 메서드를 적용해주니
const conditionsArr = restaurants.map((obj) => {
return obj.condition;
});
const uniqueConditionsArr = [...new Set(conditionsArr)];uniqueConditionsArr를 콘솔로 찍었을때 중복값이 제거된 new배열을 얻을 수 있었다.
그런데 이렇게되면 배열에 값만 들어가고 id는 없어서 해당 배열에 map메서드를 적용할 때 key값을 적용할 수 없다.
✅ 문제해결
Lodash // Array - uniqBy
https://lodash.com/docs/4.17.15
문제해결은 로대쉬(Lodash)라는 자바스크립트 라이브러리를 사용해서 할 수 있었다.
로대쉬가 무엇이냐? 구글링해보니 대략 위와 같은 설명이다. (상당히 이해가 안간다 🤔)
직접 사용해보니 쉽게 말해, 내가 위에서 맵이나 셋 메서드를 사용해서 배열을 조작하려고 했던 부분들을 해당 라이브러리에서 적절한 Array Method를 사용하면 아주 손쉽게 처리할 수 있었다.
사용방법도 간단하다. 내가 사용한 uniqBy 메서드를 경우로 예를 들어보겠다.
나는 일단 배열안에 들어가는 객체안의 특정 key값에 대하여(예를 들면 condition과 같이) value값의 중복을 제거하고싶은 상황이다.
위 예시를 보면 uniqBy 메서드를 사용하면 나의 니즈에 맞는다는걸 알 수 있다.
npm package로 다운받아준 다음에, 아래처럼 import 해서
import uniqBy from 'lodash.uniqby';
아래와 같이 사용해주면 restaurants 배열에 대하여 'condition' key값을 기준으로 중복되는 value값을 가지는 객체를 제외시켜준다.
export default function HomePage({ restaurants }) {
const sortCoditions = uniqBy(restaurants, 'condition');
};