[React] map() 메서드, map() 함수란?

✏️Array.prototype.map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

 

✔️ 그래서 이게 뭔데?

1. 반복되는 컴포넌트를 렌더링 하기 위해 사용한다. => 즉 반복문이라고 생각하면 편할것 같다.

2. 기존의 배열에 새로운 규칙을 추가하여 계산한 다음, 새로운 배열을 만들어낸다.

=> 즉 원본 배열 + 이렇게 변화시켜줘! 하는 규칙 = 네가 원하는 배열 로 나온다고 생각하면 된다.

 

그러니까 반복문인데 새로운 배열을 뱉어내는 반복문. 으로 나는 이해하였다.

 

예시를 하나 먼저 보겠다.

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

이 코드는 [2, 4, 6, 8, 10]을 출력한다.

원래의 배열에 * 2를 하여 새로운 배열을 생성하였다고 생각하면 된다.

 

그렇다면 어떻게 사용할 수 있을까?

✔️ 형태는 이러하다.

array.map((arrayVal, index) => ())

• array : 현재 배열
• arrayVal : 현재 배열 내의 값
• index : 현재 배열 내의 값들의 인덱스 (생략가능)
• () 안에 새로운 배열을 만들기 위한 내용을 작성한다.

그리하여 위의 코드를 다시 보면

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

numbers라는 원본 배열의 값 number들을 가지고 모조리 곱하기 2를 해서 새로운 배열을 만들겠다.! 하는것이다.

 

✔️ 이런 사용도 가능하다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

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

 

그렇다면 위의 코드는 아래의 코드와 동일하다.

    <ul>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    </ul>

 

또는

<ul>{ number.map((numbers) => (<li>numbers</li>)) }</ul>

이렇게 작성도 가능하다.

 

++)  그런데 이 경우에는 key값을 추가하는게 좋다..고 하네요

---

✏️참고자료

Array.prototype.map() - JavaScript | MDN

 

리스트와 Key – React