JS_map()함수

📢 map() 함수란

map()은 배열의 모든 요소를 순회하면서 각 요소에 특정한 작업을 적용하고, 그 결과를 새로운 배열로 반환하는 자바스크립트의 고급 배열 메서드.

리액트(React)에서 리스트를 렌더링할 때 필수적으로 사용되는 함수.

---

1️⃣ map()의 기본 개념

📌 문법:

array.map((element, index, array) => {
  // 새로운 값을 반환
});

매개변수 설명:

• element: 현재 순회 중인 배열 요소
• index: 현재 요소의 인덱스 (0부터 시작)
• array: map이 호출된 원본 배열 (잘 안 쓰이긴 함)

특징:

• ✅ 원본 배열을 수정하지 않고 새로운 배열을 반환
• ✅ 항상 return 값이 필요 (반환된 값이 새로운 배열을 구성)
• ✅ 배열의 길이를 유지 (요소를 필터링하려면 filter() 사용)

---

2️⃣ 간단한 예제

📦 숫자 배열의 각 요소를 2배로 만들기

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map((num) => num * 2); // ✅ 2배로 변환

console.log(doubled); // [2, 4, 6, 8, 10]

• num * 2의 결과가 새로운 배열을 만듦
• 원본 배열인 numbers는 변경되지 않음

---

3️⃣ React에서의 활용 (리스트 렌더링)

📦 프로젝트 리스트 렌더링 예제

const projects = ["Grocey", "WiseOwl", "Coming Soon"];

export default function ProjectList() {
  return (
    <div>
      {projects.map((project, index) => (
        <div key={index}>{project}</div> // ✅ key 사용 (리스트 렌더링 시 필수)
      ))}
    </div>
  );
}

🚩 중요: key 속성 사용

• 리액트에서 map()으로 요소를 렌더링할 때는 각 요소를 구분하기 위한 key가 필요

• key는 고유한 값이어야 하며, 보통 id나 index를 사용함

• 리렌더링 시 성능 최적화에 중요

---

4️⃣ map()과 forEach()의 차이

🚀 비교 항목	✅ map()	✅ forEach()
목적	배열의 각 요소를 변환하여 새로운 배열 생성	배열 요소를 단순히 반복(iteration) 처리
반환값	✅ 새로운 배열 반환	❌ 반환값 없음 (undefined)
체이닝 가능 여부	✅ 가능 (e.g., map().filter())	❌ 불가능
주 사용처	데이터 변환, 새로운 배열 생성	DOM 조작, 단순한 반복 작업 등

📦 차이점 예제

const numbers = [1, 2, 3];

// ✅ map: 새로운 배열 반환
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6]

// ❌ forEach: 반환값 없음
const result = numbers.forEach((num) => num * 2);
console.log(result); // undefined

---

5️⃣ map()의 고급 활용 예제

📦 배열의 객체를 변환하기

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

// ✅ 이름만 추출하기
const userNames = users.map((user) => user.name);
console.log(userNames); // ["Alice", "Bob", "Charlie"]

📦 조건부 렌더링과 함께 사용하기

const tasks = [
  { id: 1, title: "Learn React", completed: true },
  { id: 2, title: "Build Portfolio", completed: false },
  { id: 3, title: "Apply for Jobs", completed: true }
];

export default function TaskList() {
  return (
    <ul>
      {tasks.map((task) =>
        task.completed ? ( // ✅ 조건부 렌더링
          <li key={task.id}>{task.title}</li>
        ) : null
      )}
    </ul>
  );
}

• completed가 true인 경우만 렌더링
• map() 내부에 조건문을 넣어 조건부 렌더링 처리

---

⛔️ map() 사용 시 주의할 점

1. 반드시 return 사용하기 (JSX 반환 시 중요)

   projects.map((project) => {
     return <div>{project}</div>; // ✅ return 필요
   });

   또는 축약형:

   projects.map((project) => <div>{project}</div>); // ✅ 한 줄이면 return 생략 가능

2. 리스트 렌더링 시 key 필수

   • key는 고유해야 함 (index는 비추천)
   • 데이터에 고유한 id가 있다면 그것을 key로 사용

3. 불필요한 렌더링 방지

   • map() 내부에서 복잡한 로직이 많으면 성능 저하 가능
   • 가능하면 간결한 작업만 처리하고, 복잡한 로직은 따로 분리

---

📢 최종 정리

❓ 핵심 포인트	✅ 설명
map()의 목적	배열 요소를 변환해서 새로운 배열 생성
리턴값	항상 새로운 배열 반환 (return 필수)
리액트에서의 활용	리스트 렌더링, 조건부 렌더링, 반복된 UI 요소 생성
key의 중요성	리스트 렌더링 시 각 요소 구분을 위한 고유한 값 설정 필요
forEach와의 차이점	map은 새로운 배열 반환, forEach는 단순 반복 처리 (반환값 없음)

💡 ➡ map()은 React에서 리스트 렌더링 시 가장 강력한 도구.

배열의 변환, 조건부 렌더링, 데이터 가공까지 거의 모든 곳에서 사용됨