[React] map() 함수를 사용한 리스트 렌더링 : key 속성으로 반복되는 컴포넌트를 만들어 보자

 

 

1. map() 함수란?

map() 함수는 JavaScript 배열 함수 중 하나로, 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아 새로운 배열을 반환한다. React에서 map() 함수는 주로 배열 데이터를 컴포넌트로 변환할 때 사용된다.

 

JavaScript 사용 예시

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);

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

 

 

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

React에서 map() 함수는 배열 데이터를 JSX 요소로 변환하는 데 자주 사용된다. 아래의 예시는 사용자 목록을 렌더링한 예시이다. 여기서 users 배열의 각 요소를 li 요소로 변환하고, ul 안에 렌더링한다. 여기서 key 속성에 주목할 필요가 있다.

 

 

사용자 목록을 렌더링 해보자

import React from 'react';

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

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

export default UserList;

 

실행 결과

See the Pen map()_1 by me_in_sk (@sleepyMS) on CodePen.

 

 

 

 

---

<li key={user.id}>{user.name}</li>

위의 코드와 같이 React에서 요소를 렌더링할 때 key 속성은 필수다. key는 React가 어떤 항목이 변경, 추가 또는 제거되었는지 식별하는 것을 도우며, 고유한 key를 사용하지 않으면 성능 문제가 발생할 수 있다.

 

 

3. React에서 map() 함수를 응용하자

리액트에서 map() 함수를 활용해 표현할 수 있는 컴포넌트는 li 요소만이 아니다. 아래 예시를 보자

 

사용자 테이블을 렌더링 해보자

import React from 'react';

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

const UserTable = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        {users.map((user) => (
          <tr key={user.id}>
            <td>{user.id}</td>
            <td>{user.name}</td>
            <td>{user.age}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default UserTable;

 

실행 결과

See the Pen map()_2 by me_in_sk (@sleepyMS) on CodePen.

 

 

 

 

이처럼 React에서 map() 메서드를 사용하면 배열 데이터를 효율적으로 렌더링할 수 있다. 이 글에서 살펴본 예제와 같이, map()을 통해 다양한 형태의 데이터를 컴포넌트로 변환하고 렌더링하는 방법을 익힌다면, 앞으로 더욱 복잡한 UI를 작성할 때도 큰 도움이 될 것이다. 다음 포스팅에서는 filter() 함수에 대해 다루어 보기로 하며, 이번 포스팅은 여기서 마친다.

---

 

◆ 함께 보면 좋은 

• [HTML/CSS/JS] React를 통해 useState()를 사용해 보자 : 상태를 업데이트 해보자
• [HTML/CSS] :root를 통해 CSS에서 변수를 사용해 보자 : 가상 클래스의 활용
• [HTML/CSS] cubic-bezier()를 통해 속성 변화를 조절해 보자 : 변화에 변화를 주자
• [HTML/CSS] calc()를 통해 속성값을 계산해 보자 : 사칙연산을 통한 속성값 계산