[React] 멀티 데이터를 화면에 출력하는 법, 리스트 출력 방법, map() 함수

 

배열로 들어오는 멀티 데이터를 화면에 출력하려면 map() 을 사용하면 된다.

 

import React, { useState } from 'react'

import './App.css'

function App() {

 

  //users는 배열이고, 배열 안은 객체 형태로 들어있다.

  const users = [

    {email: 'fruit1@gmail.com', name: "apple"},

    {email: 'fruit2@gmail.com', name: "melon"},

    {email: 'fruit3@gmail.com', name: "peach"},

    {email: 'fruit4@gmail.com', name: "berry"},

  ]

  return (

      <table>

        <thead>

          <tr>

            <th>이메일</th>

            <th>이름</th>

          </tr>

        </thead>

        <tbody>

          {users.map( (user) => (<User userData={user} />) )}

        </tbody>

      </table>

  )

}

const User = ({userData}) => {

  return (

    <tr>

      <td>{userData.email}</td>

      <td>{userData.name}</td>

    </tr>

  )

}

export default App

 

 

tbody 영역에 user.map() 으로 User 컴포넌트 리스트를 렌더링하였다.

 

 

 

📌 map() 함수란?

map() 함수는 배열을 순회하면서 각 요소를 변형하고 새로운 배열을 반환하는 메서드이다.

리액트에서는 주로 컴포넌트 리스트를 렌더링할 때 사용된다.

 

 

map() 기본 문법

const newArray = array.map((element, index, array) => {
  return newElement;
});

• element : 현재 순회 중인 배열의 요소
• index : 현재 요소의 인덱스
• array : 원본 배열 (잘 사용하지 않음)
• newElement : 변환된 요소 (새로운 배열의 요소가 됨)

 

리액트에서 map() 사용 예제

1️⃣ 배열을 활용한 리스트 렌더링

import React from "react";

const fruits = ["🍎 Apple", "🍌 Banana", "🍊 Orange"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li> // key 속성 추가
      ))}
    </ul>
  );
}

export default FruitList;

✅ 주의! key 속성은 리스트 렌더링에서 필수입니다. 고유한 값을 사용해야 성능 최적화가 가능합니다.

 

 

2️⃣ 객체 배열을 map()으로 렌더링

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

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

✅ id를 key로 사용하면 리스트 재렌더링 성능이 개선됩니다.

 

 

3️⃣ JSX 내에서 조건부 렌더링과 함께 사용

function FilteredUsers({ users }) {
  return (
    <ul>
      {users
        .filter((user) => user.age >= 18) // 나이 필터링
        .map((user) => (
          <li key={user.id}>{user.name} (Age: {user.age})</li>
        ))}
    </ul>
  );
}

✅ filter()와 함께 사용하면 특정 조건을 만족하는 요소만 렌더링할 수 있습니다.

 

 

🔥 map()을 사용할 때 주의할 점

1. key는 반드시 고유한 값이어야 함
   • 인덱스를 key로 쓰는 건 비추천 (배열이 변경되면 문제가 발생할 수 있음)
   • id 같은 고유한 값을 사용하는 것이 좋음
2. JSX에서 {} 안에 map() 사용
   • JSX 내부에서 {}로 감싸지 않으면 오류 발생
   • return 없이 한 줄로 표현하려면 () 사용
3. 원본 배열은 변경되지 않음
   • map()은 새로운 배열을 반환하며, 원본 배열을 변경하지 않음

 

✅ 마무리

• map()은 배열을 변환하여 새로운 배열을 반환하는 메서드
• 리액트에서는 리스트 렌더링할 때 자주 사용됨
• key 속성을 올바르게 설정하는 것이 중요
• map()과 함께 filter(), sort() 등을 조합하면 더 강력한 기능 구현 가능