Map

Js의 반복문의 일종.

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과들로 새로운 배열을 만들어 반환한다.

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);

console.log(map1);
//[2, 8, 18, 32]

특징

for과 while 등과 같은 다른 반복문과 다르게 따로 조건을 입력할 필요 없이 배열의 길이만큼 실행된다.

배열의 길이만큼, 모든 요소를 다 사용하기에 컴포넌트 등을 여러번 렌더링하는 것과 같이 배열의 값을 꺼내어 사용하는 상황에 유용하다.

컴포넌트 반복하기

map함수는 한 배열을 기반으로 특정 과정을 거쳐 새로운 배열을 생성해준다.
그래서 어떤 배열의 데이터를 일부 가공하는 데에도 사용할 수 있지만, 결국 가장 많이 사용하는 부분은 컴포넌트를 반복하는 용도이다.

const List = () => {
  const [todoList, setTodoList] = react.useState([]);
  return (
  	<ul>
    	{todoList.map((content, index) => <li>{index+1}. {content}</li>})
    </ul>
  )
}

위 코드를 실행하면 todoList에 어떤 값이 얼마나 들어가든지 그 길이 만큼 반복하고 모든 배열의 값을 반환한다.