map 함수

1. map() 함수 기본 사용법

map() 함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 처리하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수이다.
아래 예시

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

numbers 배열 객체를 선언하고 [1, 2, 3, 4, 5]로 초기화하였다. map()함수를 통해 배열 요소의 각 값에다가 곱하기 2한 결과를 return하고 있다. result 배열 객체에는 [2.4.6.8.10]의 결과값을 가지는 배열객체가 반환된다.

2. Component 배열로 map하기

import React, { Component } from 'react';
import './MyComponent.css';

class MyComponent extents Component
{
   render(){
      return(
         <ul>
              <li>Menu1</li>
              <li>Menu2</li>
              <li>Menu3</li>
              <li>Menu4</li>
         </ul>
     )
   };
} 

MyComponent는 ul태그와 li태그로 구성 된 요소를 반환하는 Component이다. 그런데 li태그의 경우는 반복적으로 나타내고 있다. 이를 map 함수를 통해 Component 배열 객체를 생성하여 간단하게 표현이 가능하다.

import React, { Component } from 'react';
import './MyComponent.css';

class MyComponent extends Component
{
    render(){
    
        const menus = ["Menu1", "Menu2", "Menu3", "Menu4"]
          const menulist = menus.map((menu) => (<li>{menu}</li>));
          
        return(
            <ul>
                {menuList}
            </ul>
         )
      };
 }
 
 export default MyComponent;

먼저 데이터 배열 객체인 menus를 선언하고 초기화한다.
map() 함수를 통해 데이터 배열 객체의 각요소를 출력값으로 하는 li~/li 코드로 된 새로운 배열을 생성하여 menuList에 담는다. ul~/ul 사이에는 {}안에 배열 객체 이름을 작성한다. 이 상태에서 앱을 실행하면 "key" prop가 없다는 오류 메세지가 뜬다.

---

3. key 설정하기

리액트(React)에서는 컴포넌트를 렌더링 햇을 때 어떤 요소가 변경되었는지 빠르게 감지하기 위해 사용한다. 만약 key가 설정 되지 않았으면 가상 DOM을 순차적으로 비교하면서 감지하기 때문에 KEY가 없을 때보다 속도가 느리다. 이러한 key 값은 map() 함수를 호출하라 때 인자로 넘기는 Callback 함수의 인자로 넘어오는 index 값을 사용한다

import React, { Component } from 'react';
import './MyComponent.css';

class MyComponent extends Component
{
    render(){
    
        const menus = ["Menu1", "Menu2", "Menu3", "Menu4"]
          const menulist = menus.map((menu, index) => (<li>{menu}</li>));
          
        return(
            <ul>
                {menuList}
            </ul>
         )
      };
 }
 
 export default MyComponent;
     

Callback 함수로 넘어오는 인자로 index 인자값을 추가했다. 요소에 key 값을 설정하는 방식은 Component에 props를 설정하듯이 하면 된다.