웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > lodash

[lodash] groupBy() 메소드를 사용하여 특정 값을 프로퍼티로 가지는 값으로 재분류 그룹핑하기

Last Modified : 2023-10-17 / Created : 2023-08-22
2,024
View Count
Lodash 배열 메소드 중 하나인 _.groupBy()에 대하여 자세히 알아보겠습니다.




lodash groupBy() 메소드


해당 메소드는 컬렉션의 특정 값을 프로퍼티로하여 해당 컬렉션을 기준으로 재정렬을 수행하는 매우 편리한 메소드입니다. 즉 groupBy의 의미처럼 특정 값을 기준으로 그룹핑한 결과를 반환하게 됩니다. 쉽게 예를들어 특정 학생들의 컬렉션 데이터가 있다고 가정합니다. 이 데이터들은 학생들의 성적에 대한 A, B, C, D, F의 등급을 가지고 있는데 각 등급을 기준으로 재분류가 필요한 경우 매우 쉽고 편리하게 사용할 수 있습니다. 그럼 문법부터 알아봅니다.

_.groupBy(Data, PropertyName)

간단한 문법은 위와 같습니다.

Data // 재정렬 대상이 되는 배열 또는 컬렉션 데이터
PropertyName // 기준이 될 프로퍼티 이름

위 메소드의 수행하면 어떻게 될까요? PropertyName을 가지는 객체의 값으로 각각 분류되어 재정렬됩니다. 아래 예제를 보면 이해가 더 빠릅니다.

그럼 아래에서 간단한 예제를 만들어보겠습니다.


! lodash groupBy() 예제보기


아래는 학생들의 이름과 성적을 가진 데이터입니다. 이 데이터를 사용하여 성적으로 재정렬된 데이터를 얻기 위해서 lodash의 groupBy()를 사용하는 메소드입니다.

@ 성적에 따라 그룹으로 묶기
students = [
  {
    name: 'Tom',
    grade: 'C'
  },
  {
    name: 'Steve',
    grade: 'A'
  },
  {
    name: 'Robert',
    grade: 'B'
  },
  {
    name: 'Ethan',
    grade: 'A'
  },
  {
    name: 'James',
    grade: 'C'
  }
]

이제 grade 프로퍼티를 기준으로 재정렬된 배열 값을 얻어보도록 하겠습니다.
studentByGrade = _.groupBy(students, 'grade')

// 실행결과
{
  A: [
    {name: 'Steve', grade: 'A'}
    {name: 'Ethan', grade: 'A'}
  ],
  B: [
      {name: 'Robert', grade: 'B'}
  ],
  C: [
    {name: 'Tom', grade: 'C'}
    {name: 'James', grade: 'C'}
  ]
}

결과를 보면 명확합니다. grade로 그룹핑된 리스트에 따라 재정렬된 것을 볼 수 있습니다.


@ 나이로 그룹하여 정렬하기
이번 예제는 people 컬렉션에 포함된 사람들을 각각의 나이에 따라 그룹하여 정렬하는 예제입니다. 먼저 people 변수는 다음과 같습니다.
const people = [
  { 'name': 'Alice', 'age': 15 },
  { 'name': 'Bob', 'age': 15 },
  { 'name': 'Charlie', 'age': 20 },
  { 'name': 'David', 'age': 20 },
  { 'name': 'Eva', 'age': 39 }
];

const groupedByAge = _.groupBy(people, 'age');

이제 새로 생성된 groupedByAge의 결과를 확인하면 아래와 같이 나타납니다.
{
  '15': [
     { name: 'Alice', age: 25 }, { name: 'Bob', age: 25 }
  ],
  '20': [
    { name: 'Charlie', age: 20 }, { name: 'David', age: 20 }
  ],
  '39': [
     { name: 'Eva', age: 39 }
  ],
}

위와 같이 간단하게 나이에 따라 그룹핑 할 수 있습니다.



마치면서 


이와 같이 lodash의 groupBy() 메소드를 사용하면 많은 데이터를 원하는 값으로 정렬을 매우 쉽고 간편하게 할 수 있습니다. 여기까지 lodash GroupBy()에 대하여 간략하게 알아보았습니다.

Previous

lodash concat() 메소드 알아보기

Previous

[lodash] 배열 인덱스로 삭제 방법, pullAt() 알아보기