FrontEnd/React.js
[React.js] Array.map() 사용 시 unique "key" props Error
푸고배
2021. 5. 7. 20:01
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;
반응형