객체 배열의 중복 제거 (filter, findLastIndex 메서드)

오늘은 객체 배열의 데이터에서 중복되는 객체의 값이 있을 때 원하는 조건으로 중복을 제거하는 방법에 대해 적어보려고 한다.

프로젝트를 진행할 때 OTT별 영화 데이터를 홈 화면에 보여줘야 했는데, 처음엔 영화 순위를 기준으로 화면에 렌더링 되도록 코드를 작성해 뒀다.

하지만 하루에 한번씩 크롤링을 통해 새로운 영화가 쌓이게 되고 나니 중복되는 순위의 영화는 중복으로 나타나게 되고 심지어 순서도 뒤죽박죽이 되는 점을 확인할 수 있었다.

현재 코드에서는 데이터를 받아오는 형태는 객체 배열이고, 정렬 조건은 먼저 OTT별 영화 순위, 중복되는 순위가 있다면 수정 시간이 최근인 데이터를 보여주도록 하는 과정이 필요했다.

검색해 보니 javascript에서 객체 배열 중복을 없애는 방법은 여러가지가 있었다.
1. map을 통한 제거 방법
2. filter를 이용한 제거 방법
3. set을 이용한 제거 방법

이 외에도 여러가지 방법이 있는데 난 가장 익숙한 filter메서드를 이용했다.
(filter를 사용할 때는 받아오는 데이터 값이 배열이 아니면 오류가 생길 수 있으니 주의해야 한다)

 

수정한 코드는 아래와 같다.

//해당 포스팅과 관련 없는 코드는 수정 및 삭제했습니다.

const Main = () => {
	//useCustomQuery를 이용해서 받아온 데이터를 data에 담아줌
  const { data, isLoading, error } = useCustomQuery(`/contents`); 
  const movies = [data];

	//조건에 맞는 값들만 새 변수에 할당
  const Watcha = movies.filter((watchMovie, index) => {
    return (
      movies.findLastIndex((watchMovie2, j) => {
        return watchMovie.contentOttRank === watchMovie2.contentOttRank;
      }) === index
    );
  });
  
	//뒤죽박죽된 순서를 영화 순위대로 정렬하는 코드
  const WatchaResult = Watcha.sort((a, b) => {
    return a.contentOttRank - b.contentOttRank;
  });


  return (
    <div>
        <ItemContainer movies={WatchaResult} ottName={`Watcha`} />
    </div>
  );
};

export default Main;

findIndex의 반대인 findLastIndex를 이용해서 배열의 뒤에서 부터 데이터를 확인했다 (최근 데이터가 뒤로 쌓였기 때문에 )

단순 배열에서의 데이터를 정리하려면 indexOf()를 이용해도 되지만 객체를 요소로 가지고 있으면 객체의 값을 비교해야 하기 때문에 findLastIndex()의 인자로 객체의 값을 비교하는 비교 함수를 넘겨서 값이 일치하는 객체의 배열 인덱스를 가져와야 한다.

findLastIndex메소드를 이용해서 필터링을 해줬기 때문에 가지고 있는 데이터 상에서는 정렬하는 코드가 없어도 영화 순위 순서대로 잘 나오는 것을 확인할 수 있었다.
하지만 더 많은 데이터가 쌓이고 나서 혹시 모를 예외가 생길 수 있다고 생각해 정렬하는 코드를 추가로 작성해주었다.

---

filter는 비교적 간단하고 익숙한 방식이라 생각했기 때문에 선택했지만 OTT가 다양해질수록 중복되는 코드가 많아진다는 단점이 생길 수 있다.
다른 방식을 이용해서 더 깔끔하게 원하는 데이터를 받아오는 방식을 고민해서 리펙토링할 필요가 있다고 생각했다.

---

참고

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex

https://blogpack.tistory.com/1068

https://jsikim1.tistory.com/227