map, filter, reduce의 원리를 이해하고, 리액트 컴포넌트 안에서 깔끔하게 데이터를 가공하는 습관을 들입니다.
🔄 왜 for문을 버리고 메서드를 써야 할까?
자바스크립트 개발자라면 한 번쯤은 `for (let i = 0; i < array.length; i++)` 구문을 써보셨을 겁니다.
하지만 현대적인 개발, 특히 React에서는 이 방식이 환영받지 못합니다.
그 이유는 크게 두 가지입니다: 선언적 코드(Declarative Code)와 불변성(Immutability)입니다.
이 세 가지 메서드는 원본 배열을 훼손하지 않고(불변성 유지), "무엇을 할지"에만 집중하는 코드를 작성할 수 있게 돕습니다.
1️⃣ map: 배열을 '변형'할 때 사용 (React 렌더링 필수)
`map`은 배열의 각 요소를 순회하며 "1대 1로 새로운 형태로 변형"할 때 사용됩니다.
결과는 항상 원본 배열과 길이가 같은 새로운 배열입니다.
이 메서드는 리액트에서 데이터 배열을 **JSX 엘리먼트 배열**로 변환하여 화면에 목록을 렌더링할 때 필수적으로 쓰입니다.
📌 문법과 역할
const newArray = numbers.map((number) => {
return number * 2; // 새로운 요소 반환
});
// 결과: [2, 4, 6]
`map`의 콜백 함수가 반환하는 값이 새로운 배열의 요소가 됩니다.
리액트에서는 이 반환 값 자리에 `
- ` 같은 컴포넌트를 넣어주면 됩니다.
2️⃣ filter: 배열에서 원하는 요소만 '선택'할 때 사용
`filter`는 이름 그대로 배열에서 특정 조건을 만족하는 요소들만 **걸러내어** 새로운 배열을 생성합니다.
결과는 원본 배열보다 길이가 같거나 작은 새로운 배열입니다.
로그인한 사용자 목록만 보여주거나, 완료되지 않은 할 일만 필터링할 때 유용합니다.
📌 참(True)을 반환하면 포함!
return user.age >= 20; // 조건이 true인 요소만 남김
});
`filter`는 요소를 수정하는 것이 아니라, 포함할지 말지만 결정합니다.
배열 요소 자체를 바꾸고 싶다면 `map`을 사용해야 합니다.
3️⃣ reduce: 배열을 '하나의 값'으로 응축할 때 사용 (만능 도구)
`reduce`는 배열 전체를 순회하여 **최종적으로 단 하나의 값** (숫자, 객체, 배열 등 원하는 모든 형태)을 만들어냅니다.
가장 문법이 복잡하지만, `map`과 `filter`를 포함한 거의 모든 배열 작업을 `reduce`로 구현할 수 있는 **만능 도구**입니다.
📌 Accumulator (누적값) 이해하기
`reduce`는 두 가지 인자를 받습니다: 콜백 함수와 초기값(Initial Value).
특히 콜백 함수의 첫 번째 인자인 **Accumulator (누적값)**가 핵심입니다.
이 누적값에 이전 계산 결과가 계속 쌓이면서 최종 결과가 만들어집니다.
const sum = numbers.reduce((acc, current) => {
return acc + current;
}, 0); // 초기값 0
`map`과 `filter`가 필요한 상황이라면 해당 메서드를 쓰는 것이 코드를 더 직관적으로 만듭니다.
하지만 배열을 객체로 변환하거나, 요소들을 기반으로 복잡한 단일 결과를 만들어야 할 때는 reduce가 빛을 발합니다.
📝 핵심 요약: 3대장 역할 한눈에 비교
| 메서드 | 주요 목적 | 결과 형태 |
|---|---|---|
| map | 배열의 요소 변형 (Transformation) | 원본과 길이가 같은 새 배열 |
| filter | 조건에 맞는 요소 선택 (Selection) | 원본보다 짧거나 같은 새 배열 |
| reduce | 하나의 최종 값으로 응축 (Accumulation) | 단일 값 (숫자, 객체, 배열 등) |
댓글 쓰기