[React] 리액트 Map 사용법

웹 프로그래밍을 하다보면 비슷한 UI를 여러번 반복해 주어야 할때가 있는데 (ex. 상품 리스트)

보통 쌩자바스크립트에서는 for, forEach를 활용하여 코드를 확 줄일 수 있었다.

React에서는 Map이 그와 비슷한 역할을 해준다.

(JSX 중괄호에선 For 반복문을 사용할 수 없어 map 을 대신 사용한다.)

 

Map 기본 사용법

 

Map 함수는 array 자료 갯수만큼 함수 안의 코드를 실행해준다.

Array 자료 뒤에 메소드 형태로 붙고, 콜백 함수를 괄호 안에 적는다.

이때 파라미터를 세 개까지 작명할 수 있다.

 

array.map((element, index, array) => {
  // Return a new element based on the current element
});

 

여기서 element는 배열의 현재 요소 즉 Array의 자료를 하나씩 꺼낸 것이다.

index는 0부터 1씩 증가하는 정수이고,

array는 map 함수가 붙어있는 Array 자체를 나타낸다.

 

 

아래의 예제를 통해 Map 함수를 익혀보자.

const friends = ['철수', '영희', '기영'];

const greetings = friends.map(friend => `Hi, ${friend}!`);
console.log(greetings); // ["Hi, 철수!", "Hi, 영희!", "Hi, 기영!"] 으로 출력됨