[TypeScript] Array.reduce() 함수, React에서 제대로 사용하는 법

reduce()

 

프론트엔드 개발을 하다 보면 map, filter, reduce 같은 배열 메서드를 자주 사용하게 됩니다.
그중에서도 reduce()는 많이 쓰이지만 이해하기 어려운 함수 중 하나죠.
이번 글에서는 reduce()를 React 실무 코드와 함께 알기 쉽게 정리해보겠습니다!

 

reduce() 란 무엇인가?

 

reduce()는 JavaScript(또는 TypeScript) 배열(Array)의 고차 함수 중 하나로, 배열의 모든 요소를 순회하면서 하나의 결과값으로 줄여주는 기능을 하는 메서드입니다.

보통 숫자 합산, 객체 배열 그룹화, 통계 계산 등에서 자주 활용됩니다.
함수형 프로그래밍 스타일에 익숙해지기 위한 필수 메서드 중 하나이기도 하죠.

 

reduce()의 특징

 

 

1. 배열의 모든 요소를 순회하며 누적(accumulate) 처리를 합니다.
   (map, filter처럼 배열을 반환하는 것이 아닌, 최종 하나의 값으로 줄임)
2. 초기값(initialValue)을 기반으로 계산을 시작하며,
   각 요소에 대해 콜백 함수의 리턴값을 누적값으로 넘깁니다.
3. 숫자뿐 아니라 문자열, 객체, 배열, boolean 등 어떤 형태로도 누적 결과를 만들 수 있습니다.
4. 타입스크립트에서는 제네릭을 활용해 누적값의 타입을 명확히 지정할 수 있어 타입 안정성을 높일 수 있습니다.
5. 실무에서는 아래와 같은 용도로 자주 사용됩니다:
   • 금액, 점수 등의 총합 계산
   • 객체 배열을 그룹화하여 시각화나 통계에 활용
   • React 컴포넌트 내에서 상태 기반 데이터 요약 처리

 

예제 1: 숫자 배열 합 구하기

const numbers: number[] = [10, 20, 30];

const total: number = numbers.reduce<number>((sum, num) => {
  return sum + num;
}, 0);

console.log(total); // 60

 

• reduce<number>: 누적값(sum)의 타입이 number라고 명시
• 0: 초기값도 number

TypeScript에서는 제네릭 타입을 명시하면 타입 추론이 더 명확해지고
의도하지 않은 누적 계산 오류도 막을 수 있습니다.

 

 

예제 2: 객체 배열 → 합산하기

 

이번 예제는 reduce()를 활용해
사용자 배열(User[])에서 전체 사용자의 나이 총합을 구하는 코드!!

type User = {
  id: number;
  name: string;
  age: number;
};

const users: User[] = [
  { id: 1, name: "뭉", age: 30 },
  { id: 2, name: "몽나", age: 28 },
  { id: 3, name: "호랭이", age: 32 },
];

const totalAge: number = users.reduce<number>((sum, user) => {
  return sum + user.age;
}, 0);

console.log(totalAge); // 90

• users.reduce<number>(...)
  → 누적값 sum의 타입이 number임을 명시합니다. (타입 안정성 확보)
• (sum, user) => sum + user.age
  → 누적된 나이(sum)에 현재 사용자 나이(user.age)를 더합니다.
• 0
  → 초기값. 누적 합계를 0부터 시작합니다.

더 쉽게 설명하자면 reduce()는 배열을 순회하며 아래와 같이 동작합니다.

1. 처음엔 sum = 0
2. 첫 번째 사용자: sum = 0 + 30 = 30
3. 두 번째 사용자: sum = 30 + 28 = 58
4. 세 번째 사용자: sum = 58 + 32 = 90

최종 결과는 totalAge = 90이 됩니다.

 

이런 방식은 React에서 상태 요약이나 통계 계산 등에 자주 활용됩니다.

 

 

핵심 요약

 

• reduce()는 배열을 하나의 값으로 줄이는 데 사용
• TypeScript에선 제네릭 <T> 타입을 활용하면 타입 안전성 확보 가능
• 실무에서는 숫자 합산, 객체 그룹화, 카운팅, 상태 계산 등 다양한 곳에 쓰임