[React.js] Array.map() 사용 시 unique "key" props Error

import React from 'react';

const App = () => {
	const numbers = [1,2,3,4,5];
    const numberList = numbers.map(number => <li>{number}</li>);
    return <ul>{numberList}</ul>;
}

export default App;

해당 코드를 실행하면, 아래와 같은 에러가 발생한다.

 

Warning : Each child in a list should have a unique "key" prop.

 

"key" prop이 없다는 경고 메시지인데, key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다. 하지만 key가 있다면, 변화를 더욱 빠르게 감지할 수 있다.

 

key값은 언제나 유일해야하기 때문에 데이터가 가진 고윳값을 key로 설정한다.

만약 이러한 값이 없다면, map의 콜백 함수의 인수인 index 값을 사용하면 된다.

 

numbers.map(number => <li>{number}</li>를

numbers.map((number,index) => <li key={index}>{number}</li>와 같이 수정한다.

 

수정한 전체 코드

import React from 'react';

const App = () => {
	const numbers = [1,2,3,4,5];
    const numberList = numbers.map((number, index) => <li key={index}>{number}</li>);
    return <ul>{numberList}</ul>;
}

export default App;