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

Last Modified : 2023-10-17 / Created : 2023-08-22

2,894
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()에 대하여 간략하게 알아보았습니다.

아래의 글도 찾고 계시지 않나요?

lodash concat() 메소드 알아보기

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