[React] map() 함수의 개념과 사용

🔁 map() 함수란?

자바스크립트 배열의 내장 함수로, 반복되는 컴포넌트를 렌더링하기 위해 사용된다.

파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 새로운 배열 혹은 리스트를 생성한다.

상황에 따라 for문이나 다른 반복문을 대체하여 사용한다면 코드가 간편해진다.

예시

다음은 for문, map() 함수를 이용해 numbers 배열의 값을 두 배로 만드는 코드이다.

for문 사용했을 때

const numbers = [1, 3, 5, 7, 9]
for (var i = 0; i < numbers.lenght; i++) {
  numbers[i] = numbers[i] * numbers[i]
}

map() 함수 사용했을 때

const numbers = [1, 3, 5, 7, 9]
const square = numbers.map((num) => num * num);

map() 함수를 이용해 numbers 배열의 값을 두 배로 만들고, map() 에서 반환하는 새 배열을 square 변수에 할당했다.

map() 을 사용했을 때 코드가 더 간결해지고, 편리해지는 것을 볼 수 있다.
상황에 따라 for문과 map() 함수를 적절히 사용해 보도록 하자!

✍️ 사용 방법

React에서의 map() 함수는 Javascript의 map() 함수와 유사하다.
기본적인 문법은 다음과 같다!

array.map(element, index) => {
  // 새로운 배열을 반환하는 로직
});

• array: 원본 배열
• element: 현재 요소
• index: 현재 요소의 인덱스(생략 가능하다)
• 함수 안에서는 새로운 배열을 반환하는 로직을 정의한다.

위 문법을 사용해 새로운 배열을 반환하는 로직을 작성할 수 있다. React에서는 이를 주로 사용하여 배열 요소들을 JSX로 변환하고, 이를 화면에 렌더링한다.

여러 컴포넌트 생성

예시

function App() {
  return (
    <ul>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    </ul>
  )

이렇게 다섯 개의 li 요소가 담겨 있는 코드를 map() 함수를 이용해 간결하게 만들어 보자!

const array = [1, 2, 3, 4, 5];

const listItems = array.map((item) =>
  <li>{item}</li>
);

return (
  <ul>{listItems}</ul>
);

array 배열의 각 요소를 반복하고,
각 요소를 <li> 태그로 래핑하여 새로운 배열 listItems 를 만든다.
또한 listItems 배열을 렌더링해 <ul> 리스트를 생성한다.

const array = [1, 2, 3, 4, 5];

return (
  <ul>{ array.map(item => <li>item</li> }</ul>
);

또는 이렇게 바로 map() 함수를 사용해 렌더링하는 방법도 있다.

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 },
];

const personList = people.map((person) =>
  <li>{person.name}, {person.age}</li>
);

return (
  <ul>{personList}</ul>
);

위 예시에서는 people 배열의 각 객체를 반복하고,
각 객체의 name과 age 속성을 이용하여 새로운 배열 personList를 만든다.
또한 personList 배열을 렌더링하여 <ul> 리스트를 생성한다.

---

위 블로그는 ChatGPT의 도움을 받아 작성되었습니다