React에서 map 함수 사용하기

 

🔎 React에서 map() 함수 사용하기

map()은 배열의 각 요소를 순회하며 새로운 배열을 반환하는 JavaScript 배열 메서드.

 

◼️ 기본 사용법

배열의 각 요소를 하나씩 꺼내 JSX를 반환하면 React가 화면에 렌더링한다.

function App() {
  const names = ["갓대희", "김대희", "한대희"];
  
  return (
    <div>
      {names.map((name) => (
        <div>{name}</div>
      ))}
    </div>
  );
}

1. 중괄호({})를 연다.
   • JSX 안에서 JavaScript 코드를 사용하기 위해 {}를 작성한다.
2. 반복할 배열 이름을 작성한다.
   • 반복할 데이터가 들어 있는 배열을 선택한다.
3. map() 메서드를 호출한다.
   • 배열의 각 요소를 순회하며 JSX를 반환한다.
4. 화살표 함수(=>)를 작성한다.
   • 각 요소를 어떻게 화면에 표시할지 정의한다.
5. 화살표 함수의 매개변수에 현재 요소를 받는다.
   • 배열의 각 데이터를 변수로 받아 사용한다.
6. JSX 안에서 데이터를 바인딩한다.
   • 받은 데이터를 화면에 출력한다.

 

◼️ key 속성

map()으로 여러 요소를 렌더링할 때는 반드시 key 속성을 지정해야 한다.

key는 React가 요소의 추가·삭제·변경 여부를 효율적으로 판단하기 위한 고유 식별자이다.

function App() {
  const users = [
    { id: 1, name: "김철수" },
    { id: 2, name: "이영희" },
    { id: 3, name: "박민수" }
  ];

  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
}

• 가능하면 배열의 인덱스(index)보다 고유한 ID를 key로 사용하는 것이 권장된다.

 

 

📋 map()과 forEach()의 차이 📋

구분	map()	forEach()
반환값	새로운 배열 반환	반환값 없음(undefined)
JSX 사용	가능	불가능
React에서 반복 렌더링	사용	사용하지 않음

 

 

📍 POINT 📍

✔️ React에서 반복되는 UI는 map()으로 렌더링한다. ✔️

✔️ map()으로 생성한 요소에는 반드시 key 속성을 지정해야 한다. ✔️

✔️ key는 배열 인덱스보다 고유한 ID를 사용하는 것이 권장된다. ✔️