리액트에서 map함수 사용하기

오늘은 리액트에서 map 함수를 사용하는 방법에 대해 배워볼 거예요.

map 함수는 배열을 다룰 때 정말 유용한 도구예요. 함께 알아볼까요?

---

map 함수란?

map 함수는 자바스크립트의 배열 메서드 중 하나예요. 배열의 각 요소를 순회하면서 새로운 배열을 만들어줘요.

간단한 예시를 볼까요?

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

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

이 코드에서는 numbers 배열의 각 요소를 두 배로 만든 새로운 배열 doubled를 만들었어요.

 

리액트에서 map 함수 사용하기

리액트에서는 map 함수를 사용해서 배열의 데이터를 쉽게 화면에 표시할 수 있어요. 예를 들어, 여러 개의 리스트 아이템을 렌더링할 때 유용해요. 아래의 예시를 함께 볼까요?

import React from 'react';

const App = () => {
  const fruits = ['사과', '바나나', '오렌지', '포도'];

  return (
    <div>
      <h1>과일 리스트</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

이 예시에서는 fruits 배열의 각 요소를 map 함수를 사용해서 <li> 태그로 변환했어요. key 속성은 리액트가 각 요소를 고유하게 식별할 수 있도록 도와줘요.

객체 배열 처리하기

배열에 객체가 들어있는 경우도 많아요. 이런 경우에도 map 함수를 쉽게 사용할 수 있어요. 예시를 볼까요?

import React from 'react';

const App = () => {
  const students = [
    { id: 1, name: '철수', age: 10 },
    { id: 2, name: '영희', age: 12 },
    { id: 3, name: '민수', age: 11 },
  ];

  return (
    <div>
      <h1>학생 리스트</h1>
      <ul>
        {students.map(student => (
          <li key={student.id}>
            이름: {student.name}, 나이: {student.age}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

여기서는 students 배열의 각 객체를 <li> 태그로 변환했어요. key 속성으로 id를 사용했는데, 이는 각 학생을 고유하게 식별하기 위해서예요.

 

컴포넌트로 분리하기

map 함수를 사용하다 보면 코드가 길어질 수 있어요. 이럴 때는 컴포넌트로 분리해서 사용하면 더 깔끔해요.

import React from 'react';

const Student = ({ student }) => (
  <li>
    이름: {student.name}, 나이: {student.age}
  </li>
);

const App = () => {
  const students = [
    { id: 1, name: '철수', age: 10 },
    { id: 2, name: '영희', age: 12 },
    { id: 3, name: '민수', age: 11 },
  ];

  return (
    <div>
      <h1>학생 리스트</h1>
      <ul>
        {students.map(student => (
          <Student key={student.id} student={student} />
        ))}
      </ul>
    </div>
  );
};

export default App;

이렇게 Student 컴포넌트를 만들어서 코드가 더 깔끔해졌어요.

---

map 함수와 함께 주의할 점

1. key 속성: 각 요소에 고유한 key 속성을 꼭 지정해야 해요. key는 리액트가 어떤 요소가 변경되었는지, 추가되었는지, 삭제되었는지 식별할 수 있게 도와줘요.
2. 무한 루프 주의: map 함수 안에서 상태를 변경하는 코드를 작성하면 무한 루프에 빠질 수 있어요. 상태 변경은 꼭 필요한 곳에서만 해요.