TypeScript groupBy로 배열을 한 번에 그룹화하기

• Filter 방식: 매번 filter(category === 'X') 실행 -> 전체 순회.
• GroupBy 방식: 단 한 번 reduce 실행 -> 결과 객체 생성 -> result['X']로 즉시 접근.

핵심은 배열을 순회하며 각 아이템의 특정 속성을 키로 사용하는 '해시 맵' 형태의 객체를 만드는 것입니다.

구현

TypeScript 제네릭을 활용해 재사용성이 높고 타입 안정성이 보장되는 groupBy 유틸리티 함수를 구현해 보겠습니다.

기본 구현

typescript복사
const DUMMY = [
  { category: "food", name: "짜장면" },
  { category: "electronic", name: "TV" },
  { category: "food", name: "떡볶이" },
  { category: "clothes", name: "tshirt" },
];

/**
 * 배열을 특정 키를 기준으로 그룹화하는 유틸리티 함수
 */
const groupBy = <T extends Record<string, any>>(
  array: T[],
  keyForGrouping: keyof T
): Record<string, T[]> => {
  return array.reduce<Record<string, T[]>>((group, item) => {
    const valueForGrouping = item[keyForGrouping];
    
    // 그룹이 존재하지 않으면 빈 배열로 초기화 후 아이템 추가
    return {
      ...group,
      [valueForGrouping]: group[valueForGrouping] 
        ? [...group[valueForGrouping], item] 
        : [item]
    };
  }, {});
};

// 사용 예시
const groupedData = groupBy(DUMMY, 'category');
console.log(groupedData.food); // [{ category: "food", name: "짜장면" }, ...]

성능을 고려한 구현

위 구현은 reduce 내부에서 ...group(스프레드 연산자)을 사용해 매 순회마다 새 객체를 만듭니다. 대량의 데이터를 처리하면 가비지 컬렉션 부담이 커질 수 있습니다. 실무에서는 다음처럼 객체를 직접 변경(mutable)하는 방식이 성능상 유리합니다.

typescript복사
const groupByOptimized = <T extends Record<string, any>>(
  array: T[],
  keyForGrouping: keyof T
): Record<string, T[]> => {
  return array.reduce<Record<string, T[]>>((group, item) => {
    const key = String(item[keyForGrouping]);
    if (!group[key]) {
      group[key] = [];
    }
    group[key].push(item);
    return group;
  }, {});
};

결과와 트레이드오프

성과는 다음과 같습니다.

• 코드 가독성: 데이터 분류 로직을 유틸리티 함수로 추상화해 비즈니스 로직이 깔끔해집니다.
• 성능 개선: 대규모 리스트에서 특정 카테고리 데이터를 반복적으로 찾을 때 생기던 지연이 사라집니다.

다만 다음 트레이드오프가 있습니다.

• 메모리 사용량: 원본 배열 외에 그룹화된 객체를 추가로 유지하므로 메모리 점유율이 일시적으로 올라갈 수 있습니다.
• 정적 데이터에 적합: 데이터가 실시간으로 자주 추가/변경되면 매번 다시 그룹화해야 하므로 오히려 오버헤드가 생길 수 있습니다.

마치며

TypeScript의 타입 시스템과 결합한 groupBy 함수는 데이터 중심 웹 애플리케이션에서 유용한 도구입니다. 최근 JavaScript 표준(ES2024)에는 Object.groupBy()와 Map.groupBy()가 추가되었으니, 최신 환경이라면 이를 활용하는 것도 좋은 방법입니다.

참고 자료:

• MDN: Object.groupBy()
• TypeScript Generics Documentation