수업을 듣고 정리한 글입니다.

React에서 map 메소드는 배열의 요소를 순회하면서 각 요소에 대한 작업을 수행할 때 유용하게 사용됩니다. map 메소드는 새로운 배열을 반환하며, 반환된 배열은 원래 배열과 길이가 같습니다. 이 글에서는 React에서 map 메소드를 활용하여 컴포넌트를 만들고, 컴포넌트에 props를 전달하는 방법을 다룰 것입니다.

1. map 메소드

map 메소드는 배열의 각 요소에 대한 작업을 수행하고, 그 결과를 새로운 배열에 담아 반환합니다. 예를 들어, 아래 코드는 numbers 배열의 각 요소를 두 배로 만들어 새로운 배열을 반환합니다.

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

const squares = nums.map((num) => num * num);

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

2. map으로 컴포넌트 만들기

React에서 map 메소드는 배열의 각 요소를 순회하면서 컴포넌트를 만드는 데에도 활용됩니다. 예를 들어, 아래 코드는 numbers 배열의 각 요소를 출력하는 컴포넌트를 만듭니다.

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

const NumberList = () => {
	return (
		<div>
			{numbers.map((number) => (
				<div>{number}</div>
			))}
		</div>
	);
};

ReactDOM.render(<NumberList />, document.getElementById("root"));

위 코드에서는 numbers 배열의 각 요소를 순회하면서 div 요소를 반환하는 컴포넌트를 만들었습니다. map 메소드에서 반환된 배열의 요소를 출력할 때, 각 요소를 괄호로 감싸줘야 합니다.

3. map props 일일히 넣기

map 메소드를 사용하여 생성된 컴포넌트에 props를 전달하는 방법중 하나는 일일이 props를 넣어주는 것입니다. 예를 들어, 아래 코드는 numbers 배열의 각 요소를 출력하는 컴포넌트에 props를 전달하는 예시입니다.

const data = [
	{
		type: "positive",
		num: 1,
	},
	{
		type: "negative",
		num: -1,
	},
];

const NumberList = () => {
	return (
		<div>
			{data.map((object, idx) => (
				<NumberItem key={idx} num={object.num} type={object.type} />
			))}
		</div>
	);
};

const NumberItem = ({ num, type }) => {
	return (
		<div>
			{type}, {num}
		</div>
	);
};

ReactDOM.render(<NumberList />, document.getElementById("root"));

위 코드에서는 NumberList 컴포넌트에서 data 객체의 각 요소를 순회하면서 NumberItem 컴포넌트를 생성합니다. NumberItem 컴포넌.됩니다. NumberItem 컴포넌트에는 key props와 num, name props가 전달됩니다. 이렇게 각각의 요소에 대한 props를 일일히 지정해주는 방법은 코드를 길고 복잡하게 만들 수 있습니다.

또한, 컴포넌트를 map 으로 반복할 때에는, 꼭 key prop 이 필요합니다. 이 prop은 꼭 겹치지 않는 unique 한 값이여야 합니다. 위 코드처럼 맵의 두 번째 인자를 적으면, 각 요소의
인덱스를 임의로 받을 수 있습니다.

4. 객체 넘기기

map 메소드에서 반환된 요소를 그대로 props로 전달하는 또 다른 방법은 객체 자체를 넘기는 것입니다. 예를 들어, 아래 코드는 numbers 배열의 각 요소를 출력하는 컴포넌트에 객체 자체를 넘겨서 props를 전달하는 예시입니다.

const data = [
	{
		type: "positive",
		num: 1,
	},
	{
		type: "negative",
		num: -1,
	},
];

const NumberList = () => {
	return (
		<div>
			{data.map((object, idx) => (
				<NumberItem key={idx} object={object} />
			))}
		</div>
	);
};

const NumberItem = ({ object }) => {
	return (
		<div>
			{object.type}, {object.num}
		</div>
	);
};

ReactDOM.render(<NumberList />, document.getElementById("root"));

위 코드에서는 NumberList 컴포넌트에서 data 객체의 각 요소를 순회하면서 NumberItem 컴포넌트를 생성합니다. 객체를 넘겨 각 요소를 개별적으로 전달했습니다.

5. Spread operator

위에서 설명한 방법 대신에, map 메소드에서 반환된 요소를 그대로 props로 전달할 수 있는 방법이 있습니다. 이 방법은 spread operator 를 사용하는 것입니다. 예를 들어, 아래 코드는 data 객체의 각 요소를 출력하는 컴포넌트에 이 문법을 사용하여 props를 전달하는 예시입니다.

const data = [
	{
		type: "positive",
		num: 1,
	},
	{
		type: "negative",
		num: -1,
	},
];

const NumberList = () => {
	return (
		<div>
			{data.map((object, idx) => (
				<NumberItem key={idx} {...object} />
			))}
		</div>
	);
};

const NumberItem = ({ num, type }) => {
	return (
		<div>
			{type}, {num}
		</div>
	);
};

ReactDOM.render(<NumberList />, document.getElementById("root"));

위 코드에서는 NumberList 컴포넌트에서 data 객체의 각 요소를 순회하면서 NumberItem 컴포넌트를 생성합니다. spread operator 문법을 사용하여 각 요소를 그대로 props로 전달했습니다. NumberItem 컴포넌트에서는 전달된 props를 그대로 출력하도록 설정했습니다.