자바스크립트 그룹핑 - 객체배열을 어떻게 원하는 대로 그룹화 할 수 있을까?

📢 최근 Vue.js로 이루어진 웹 애플리케이션을 유지 보수하게 된 업무를 받은 나는 정말 난감했다. 일단 모든 개발이 끝난 상태는 아니었지만, 80% 이상 진행된 상태였고 내가 처음부터 초기 개발자로 투입된 상황이 아니다 보니 어떤 이슈가 터져도 가벼운 이슈가 아니라 꽤 크리티컬 한 이슈였을 경우, 전체 로직을 까 봐야 하는 상황이었기에 여간 난감하지 않을 수 없었다. 그래도 명색에 Vue.js 개발자라고 불리는데 포기할 수 없어 일단 간단하게 해결해볼 수 있는 부분부터 해결해보기로 했다.

 

📢 내가 직면한 문제는 어떤 화면을 로드했을 때, 백엔드 쪽에서 넘겨주는 api를 재가공하여 초기 기획 상태의 UI처럼 구성하는 것이었다. 그래서 기존의 api는 객체 데이터가 어떤 조건으로 그룹핑되어 내려오는 것이 아니라, 하나의 배열로 넘어오는 경우라서 이 부분을 유니크한 key값(특정한 key값으로 분류할 수 있는 파라미터)으로 그룹핑하여 새로운 배열에 할당하여 다시 화면단으로 던져주기로 했다. 그래서 오늘은 자바스크립트 그룹핑에 대해 한 번 살펴보고자 한다.

---

📢 자바스크립트 그룹핑?

그렇다면 자바스크립트 배열 그룹핑이라는 건 무엇일까?

 

어떠한 배열 안에 무수히 많은 객체 리터럴 데이터가 있다고 가정해보자. 이 데이터 안에는 우리가 활용할 데이터가 들어있는데 a라는 페이지에서 사용되는 데이터, b라는 페이지에서 사용되는 데이터 모두 포함될 수 있다. 그래서 우리가 활용하고 싶은 데이터만 추출해서 혹은 특정 조건에 대해서 새로운 구조로 배열하고 싶을 때 그룹핑을 통해 데이터를 재가공하는 것을 말한다.

 

예를 한 번 들어보자. 아래와 같은 코드가 있다고 가정해보자. 

하나의 배열에 3개의 객체 데이터가 있고, name과 category라는 key로 구분되어있다.

 

위의 첫 번째 사진의 코드를 두 번째와 같은 코드를 아래와 같은 사진의 코드처럼 새로운 구조의 데이터로 가공하고 싶다면 어떻게 하면 될까? 방법은 여러 가지가 있었다. 나 역시 직접 머리를 쥐어짜서 결과를 낼 수 있는 실력이 되지 않아 일단은 구글의 힘들 받아보기로 했다. 구글에 검색을 해보니 방법이 있었다.

 

일단 구글링을 통해서 찾은 첫 번째 방법은 위 코드처럼 reduce() 메서드를 활용하여 인자로 받은 product(현재 값)에서 category만 구조 분해 할당하여 group이라는 새로운 객체에 새로운 배열을 생성해 push를 통해 만들어주는 방법이 있었다. 실제로 로컬 환경에서 확인해보면 올바르게 출력된다.

---

📢 lodash 라이브러리 

두 번째 방법은 lodash라는 라이브러리를 활용하는 것이다.

lodash는 JavaScript의 인기 있는 라이브러리 중 하나이다.

보통의 경우 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다룰 수 있게끔 하는데에 사용된다.

 

JavaScript에서 배열 안의 객체들의 값을 handling(배열, 객체 및 문자열 반복 / 복합적인 함수 생성) 할 때 유용하고, 이러한 점으로 인해 JavaScript의 코드를 줄여주고, 빠른 작업에 도움이 됩니다. 특히 frontend 환경에서 많이 쓰인다.

ㅡ. (변수) 이런식으로 작성할 경우 lodash wrapper로 변수를 감싸게 되면서 해당 변수에 대한 chaining을 시작한다.
_라는 기호를 이용해서 사용하기 때문에 명칭 또한 lodash가 됐다고 한다.
그 외에 lodash를 사용하는 이유들은 다음과 같다.

브라우저에서 지원하지 않는 성능이 보장되어있는 다양한 메서드를 가지고 있음.
퍼포먼스 측면에서 native보다 더 나은 성능을 가짐.
npm이나 기타 패키지 매니저를 통해 쉽게 사용 가능.

 

1️⃣ node.js 설치

2️⃣ npm i --save lodash

3️⃣ _.groupBy() 메서드 사용

 

lodash에 대해서는 다음에 더 깊게 알아보도록 하자.