Ch.23 JS 핵심 패턴 — 배열 메서드 마스터

map — 데이터 변환의 기본기

for문과 map의 차이를 설명할 수 있다map으로 배열을 변환할 수 있다React에서 map으로 리스트를 렌더링할 수 있다

AI가 생성한 코드에 map이 왜 이렇게 많지?

AI에게 코드를 생성시키면 for문 대신 map이 나옵니다. 읽을 수 없으면 수정도 못 합니다.

map이 대체 뭐길래 모든 곳에 쓰이는 걸까?

map — 배열의 각 요소를 변환해서 새 배열을 만드는 메서드입니다. React에서 리스트 렌더링의 핵심이죠.

article

핵심 내용

for문은 어떻게 할지 지시하고 map은 무엇을 할지 선언합니다

왜 map을 쓸까? map은 코드가 짧고, 원본을 건드리지 않아 버그가 적습니다. AI가 map을 선호하는 이유이기도 합니다.

map의 콜백 함수에는 요소, 인덱스, 배열 3개가 전달됩니다

// 기본 문법
배열.map((요소, 인덱스, 원본배열) => 변환값)

// 숫자 배열 변환
const prices = [1000, 2000, 3000];
const withTax = prices.map((p) => p * 1.1);
// [1100, 2200, 3300]

// 문자열 배열 변환
const names = ["kim", "lee", "park"];
const upper = names.map((n) => n.toUpperCase());
// ["KIM", "LEE", "PARK"]

// 객체 배열에서 특정 필드 추출
const users = [
  { id: 1, name: "김철수", age: 25 },
  { id: 2, name: "이영희", age: 30 },
  { id: 3, name: "박지민", age: 28 },
];

// 이름만 추출
const names = users.map((u) => u.name);
// ["김철수", "이영희", "박지민"]

// 새로운 형태로 변환
const cards = users.map((u) => ({
  label: u.name,
  description: `${u.age}세`,
}));

바이브 코더 팁 AI가 생성한 코드에서 `.map()`을 보면 "배열을 변환하고 있구나"라고 읽으세요. 무엇을 → 무엇으로 바꾸는지만 파악하면 됩니다.

React에서 리스트를 그리는 방법은 오직 map뿐입니다

// React 리스트 렌더링
function ProductList() {
  const products = [
    { id: 1, name: "노트북", price: 1200000 },
    { id: 2, name: "키보드", price: 89000 },
    { id: 3, name: "마우스", price: 45000 },
  ];

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name} — {product.price.toLocaleString()}원
        </li>
      ))}
    </ul>
  );
}

// ❌ index를 key로 쓰면 안 되는 이유
// 항목이 추가/삭제되면 index가 바뀌어서
// React가 잘못된 항목을 업데이트함
{items.map((item, index) => (
  <li key={index}>{item.name}</li>  // ❌
))}

// ✅ 고유 id를 key로 사용
{items.map((item) => (
  <li key={item.id}>{item.name}</li>  // ✅
))}

map은 원본 배열을 직접 수정한다

React에서 리스트 렌더링 시 key prop에 적합한 값은?

[1, 2, 3].map(n => n * 3)의 결과는?

key

핵심 용어

🆕

새 배열 반환

원본 배열은 그대로, 변환된 새 배열을 돌려줌

🔄

1:1 변환

입력 5개 → 출력 5개. 개수가 항상 같음

🛡️

원본 불변

원래 배열을 수정하지 않아 안전함

🔑

왜 필요한가

React가 어떤 항목이 바뀌었는지 추적하기 위해

✅

무엇을 써야 하나

고유한 id (DB id, uuid 등). 절대 index 쓰지 말 것

⚠️

빠뜨리면?

콘솔에 key 경고가 뜨고, 리스트 업데이트 시 버그 발생 가능

edit_note

정리 노트

map 핵심 정리

map 기본

map: 배열의 각 요소를 변환해서 새 배열을 반환하는 메서드
원본 불변: 원래 배열은 수정하지 않고 새 배열을 생성
1:1 변환: 입력 개수와 출력 개수가 항상 동일

React에서 map

리스트 렌더링: JSX에서 배열을 map으로 변환해 컴포넌트 리스트 생성
key prop: 각 항목에 고유 id를 key로 전달, index 사용 금지

★

AI 코드에서 .map()을 보면 '배열을 변환하고 있구나'라고 읽으세요.

image

시각 자료

다이어그램: wd-scene-array-methods

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작