웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있다.

import React from 'react';

const InterationSample = () => {
	return(
		<ul>
			**<li>눈사람</li>
			<li>얼음</li>
			<li>눈</li>
			<li>바람</li>**
		</ul>
	);
}

✓ 지금은 li 태그 하나뿐이라 문제가 되지는 않지만, 코드가 복잡하다면 코드양도 늘어날 것이며 파일 용량도 낭비된다.

리액트 프로젝트에서 반복적인 내용을 효율적으로 보여 주고 관리하는 방법을 알아보자.

6-1. 자바스크립트 배열의 map() 함수

자바스크립트 배열 객체의 내장 함수인 map() 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다.

• map 함수는 파라미터로 전달된 함수를 사용해서, 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다.

6-1-1. 문법

arr.map(callback, [thisArg])

• callback : 새로운 배열의 요소를 생성하는 함수
  • currentValue : 현재 처리하고 있는 요소
  • index : 현재 처리하고 있는 요소의 index 값
  • array : 현재 처리하고 있는 원본 배열