[React] map

🗺️map

배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환하는 메서드

react에서는 map을 사용하여 컴포넌트를 만들 수 있다. 다음과 같은 코드는 배열의 각 요소를 li 태그로 감싸는 컴포넌트를 만든다.

사용 예시

// List.js
const List = ({ items }) => {
return (
	<ul>
		{items.map(item => (
			<li key={[item.id](http://item.id/)}>{[item.name](http://item.name/)}</li>
		))}
	</ul>
	);
};

import React from 'react';
import List from './List'; // List 컴포넌트 import

const App = () => {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  return (
    <div>
      <h1>My List</h1>
      <List items={items} />
    </div>
  );
};

export default App;

map을 사용하면 배열의 길이나 내용이 변경되어도 자동으로 반영되어 컴포넌트의 재사용성을 높여준다. 같은 형태의 컴포넌트를 다른 배열과 함께 사용할 수도 있다.