통합 요약노트
Ch.23 JS 핵심 패턴 — 배열 메서드 마스터
map, filter, reduce, 구조분해, 스프레드 — AI 코드를 읽는 필수 문법
이 챕터의 내용
map — 데이터 변환의 기본기
map — 배열의 각 요소를 변환해서 새 배열을 만드는 메서드입니다. React에서 리스트 렌더링의 핵심이죠.
for문은 어떻게 할지 지시하고 map은 무엇을 할지 선언합니다
map의 콜백 함수에는 요소, 인덱스, 배열 3개가 전달됩니다
React에서 리스트를 그리는 방법은 오직 map뿐입니다
filter와 find — 조건부 추출
filter — 조건을 만족하는 요소만 모아 새 배열을 만듭니다. find는 첫 번째 매칭 하나만 반환합니다.
filter의 콜백이 true를 반환하면 해당 요소가 새 배열에 포함됩니다
filter는 모든 매칭을 반환 find는 첫 번째 매칭만 반환합니다
배열 메서드는 체이닝할 수 있습니다 filter → map 순서가 가장 흔합니다
구조분해와 스프레드
구조분해 — 객체/배열에서 값을 꺼내는 문법. 스프레드 — 배열/객체를 펼치는 문법. React의 필수 패턴입니다.
객체에서 원하는 속성만 변수로 꺼내는 문법입니다
useState가 배열 구조분해라는 걸 알면 React가 더 쉬워집니다
... (점 세 개)는 배열/객체를 펼치는 연산자입니다
reduce와 체이닝
reduce — 배열을 순회하면서 하나의 값으로 줄여가는 메서드입니다. 가장 강력하지만 읽기 어려울 수 있습니다.
reduce는 누적기(acc)에 값을 하나씩 쌓아갑니다
reduce로 그룹핑, 카운팅, 객체 변환이 가능합니다
filter → map → reduce 데이터 처리 파이프라인입니다
핵심 용어 모음
새 배열 반환
원본 배열은 그대로, 변환된 새 배열을 돌려줌
1:1 변환
입력 5개 → 출력 5개. 개수가 항상 같음
원본 불변
원래 배열을 수정하지 않아 안전함
왜 필요한가
React가 어떤 항목이 바뀌었는지 추적하기 위해
무엇을 써야 하나
고유한 id (DB id, uuid 등). 절대 index 쓰지 말 것
빠뜨리면?
콘솔에 key 경고가 뜨고, 리스트 업데이트 시 버그 발생 가능
map
변환 — 형태를 바꿀 때 (5개 → 5개)
filter
추출 — 조건에 맞는 것만 (5개 → 2개)
find
검색 — 첫 번째 매칭 하나 (5개 → 1개)
reduce
요약 — 하나의 값으로 (5개 → 1값)
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기