[React] 리액트 - 배열 내장 함수 map을 통한 Component 반복

안녕하세요. 이번 포스팅에서는 배열 객체에 내장된 map() 함수를 통하여 반복되는 Component를 렌더링하는 방식에 대해서 알아보겠습니다. 

 

---

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 extends Component
{    
    render(){
        return(
            <ul>
                <li>Menu1</li>
                <li>Menu2</li>
                <li>Menu3</li>
                <li>Menu4</li>
            </ul>
        )
    };
}

export default MyComponent;

 

▼ 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 key={index}>{menu}</li>));

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

export default MyComponent;

 

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