[React] map()메서드를 이용한 Component 반복하기

javascript 메서드중 map() 메서드는 배열에 원하는 조건을 설정 한 뒤 그 조건으로 배열을 다시 배치하는 메서드이다. 이 map() 메서드를 이용해 반복되는 컴포넌트들을 배치할 수 있다.

1. 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는 <li>태그가 반복적으로 나열 되어있는 구조의 컴포넌트 이다. 이 <li> 태그의 반복되는 것을 map()메서드를 이용해 간단하게 표현할 수 있다.

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;

• 먼저 객체, 배열을 변수에 할당 해준다.
• map() 함수를 통해 데이터 배열 객체의 각 요소를 출력값으로하는 <li>~</li> 코드로 된 새로운 배열을 생성하여 변수를 선언 해준다.
• <ul>~</ul> 사이에는 map()메서드를 이용해 만든 변수를 넣어준다.

2. key 설정하기

리엑트 에서는 컴포넌트를 렌더링 했을때 어떤 원소가 변경되었는지 빠르게 감지하기 위해 key값을 사용한다. 만약 key값이 설정되어 있지 않다면 DOM을 순차적으로 비교하면서 감지하기 때문에 속도저하의 원인이 된다. map()메서드를 사용할때는 값으로 받는 배열, 객체들의 index값을 이용하면 된다. 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값을 설정하는 방식은 props를 설정하는것 처럼 처리해주면 된다.