arr.map() 정리

개요

function ReviewList({ items, onDelete }) {
  return (
    <ul>
      {items.map((item) => {
        return (
          <li key={item.id}>
            <ReviewListItem item={item} onDelete={onDelete} />
          </li>
        );
      })}
    </ul>
  );
}

react 학습 중 items.map((item) => { 부분을 이해 하기 위해 .map()을 정리함.

 

Array.prototype.map() 메서드

JavaScript에서 배열의 각 요소를 순회하면서 주어진 콜백 함수를 적용한 결과를 새로운 배열로 반환하는 메서드입니다.

원본 배열은 변경되지 않습니다.

 

문법

const newArray = arr.map(callback(currentValue, index, array), thisArg);

 

매개변수

 

• callback (필수) : 각 요소에 적용할 함수. 세 개의 인자를 받을 수 있습니다.
  • currentValue : 현재 처리 중인 요소
  • index (선택) : 현재 요소의 인덱스
  • array (선택) : map()이 호출된 원본 배열
• thisArg (선택)
  콜백 함수 내부에서 this로 사용할 값

반환 값

• 변환된 요소들로 이루어진 새로운 배열 (원본 배열은 변하지 않음)

예제

1. 배열 요소의 값을 변환

const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16]

2. 객체 배열 변환

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

const usernames = users.map(user => user.name);
console.log(usernames); // ["Alice", "Bob"]

3. 배열 요소를 HTML 요소로 변환

const fruits = ["Apple", "Banana", "Cherry"];
const listItems = fruits.map(fruit => `<li>${fruit}</li>`);
console.log(listItems);
// ["<li>Apple</li>", "<li>Banana</li>", "<li>Cherry</li>"]

---

배열 요소를 HTML 요소로 변환

 

1. 리스트 아이템을 생성하는 예제

 

const fruits = ["Apple", "Banana", "Cherry"];

const listItems = fruits.map(fruit => `<li>${fruit}</li>`).join("");
const ul = `<ul>${listItems}</ul>`;

console.log(ul);
/*
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>
*/

---

2. 객체 배열을 HTML 테이블로 변환

 

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

const tableRows = users.map(user => 
  `<tr><td>${user.id}</td><td>${user.name}</td><td>${user.age}</td></tr>`
).join("");

const table = `<table border="1">
  <tr><th>ID</th><th>Name</th><th>Age</th></tr>
  ${tableRows}
</table>`;

console.log(table);

---

3. React에서 JSX로 변환 (React 환경)

 

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

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

---

4. DOM 조작을 활용한 HTML 추가 (Vanilla JS)

 

const fruits = ["🍎 Apple", "🍌 Banana", "🍒 Cherry"];

const ulElement = document.createElement("ul");
ulElement.innerHTML = fruits.map(fruit => `<li>${fruit}</li>`).join("");

document.body.appendChild(ulElement);