React map 함수와 key 에 대해서 알아보자

map( )

arr.map(callback(currentValue[, index[, array]])[, thisArg])
- callback 새로운 배열 요소를 생성하는 함수.
- currentValue 처리할 현재 요소.
- index Optional 처리할 현재 요소의 인덱스.
- array Optional map()을 호출한 배열.
- thisArg Optional callback을 실행할 때 this로 사용되는 값.

반환 값
- 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.

 

map 함수를 이용하여 반복적으로 수행해야하는 컴포넌트를 렌더링 할 수 있다.

const Map = () => {

    const menu = ['pizza', 'potato-chips', 'pasta']
    const menuList = menu.map(name => <li>{name}</li>);

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

 

 

key

그런데, 위와 같이 map 을 선언할 경우 ' Warning: Each child in a list should have a unique "key" prop. ' 이 발생된다.   

엘리먼트의 고유성을 유지하기 위해 key를 지정해야하며 아래와 같이 map 함수에 전달되는 콜백 함수 인자의 index를 이용해야 한다.

const Map = () => {

    const menu = ['pizza', 'potato-chips', 'pasta']

    // 엘리먼트의 고유성을 유지하기 위해 key를 지정해야하며 아래와 같이 map 함수에 전달되는 콜백 함수 인자의 index를 이용하자.
    const menuList = menu.map((name, idx) => <li>{name}</li>);

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

 

* 참조

Array.prototype.map() [바로가기]