[Vue] lodash를 이용하여 중복 값을 제거하는 방법 (_uniqBy, _unionBy)

서론

---

보통 백단에서 중복제거를 하고 화면에서는 해당 값을 받아서 처리하는경우가 많은데, 백단 수정이 불가한 api에서 중복 값을 받게 되었을 때 쉽게 중복을 제거할 수 있는 lodash의 기법을 알아보려한다.

 

이번글에서는 lodash의 개념보단 vue에서 lodash를 사용하여 중복제거하는 방법에 대해서만 정리한다.

 

---

 

npm lodash 설치 방법

---

npm i lodash

터미널에서 위의 명령어를 입력하여 lodash를 설치하면 끝이다.

 

---

 

_uniqBy

---

https://lodash.com/docs/4.17.15#uniqBy

 

위는 lodash 홈페이지에서 가져온 이미지이다.

파라미터 형식은 다음과 같다.
_uniqBy(Array, '반환할 속성의 고유 이름')으로 되어있다.
속성의 이름은 본인이 설정하면 된다.

_uniqBy 기능
1. 배열 데이터 안의 값에서 중복되는 값들을 제거한 후 반환을 시켜준다.
2. 배열 데이터가 하나일 때 사용한다.

 

---

 

_uniqBy 사용 전

---

소스 코드

const OMDB_API_KEY = '7035c60c'
const res = await axios.get(`https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${title}&type=${type}&y=${year}&page=1`)
const { Search, totalResults} = res.data
console.log(Search);

 

결과

 

imDb api를 사용하여 jobs을 조회하였을 때 0,1번 인덱스의 값 처럼 중복으로 값이 오는 것을 확인할 수 있다. 이것을 _uniqBy를 이용하여 중복 제거를 해보자.

 

---

 

_uniqBy 사용 후

---

소스 코드

const OMDB_API_KEY = '7035c60c'
const res = await axios.get(`https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${title}&type=${type}&y=${year}&page=1`)
const { Search, totalResults} = res.data
console.log(_uniqBy(Search, 'imdbID'));

 

결과

위의 결과 이미지를 보면 이전 중복데이터가 사라진 것을 확인할 수 있다.

rest api를 백단에서 수정할 수 없는 상황일 경우 프론트에서 uniqBy를 사용하면 쉽게 해결할 수 있다.

 

---

 

_unionBy

---

https://lodash.com/docs/4.17.15#unionBy

 

추가로 여러 개의 배열을 한번에 합쳐서 중복제거할 수 있는 unionBy에 대한 정리이다.
uniqBy와 다른점은 여러개의 배열을 합친 후 중복제거를 한다는 점이기 때문에 자세한 설명은 생략한다.

파라미터 형식은 다음과 같다.
_unionBy(Array1, Array2, ... ,'반환할 속성의 고유 이름')