[React] Each child in a list should have a unique "key" prop 에러, key 값 설정하기

Each child in a list should have a unique "key" prop
목록의 각 자식 요소는 고유한 "키" 값을 가지고 있어야 합니다.

 

무지성으로 코드를 짜다보면 만나게 되는 경고
이 에러가 발생하는 이유와 React의 key에 대해 간단하게 알아보자

아래의 코드를 실행시켰다.

// Sample.js
import React from "react";

const IterationSample = () => {
  const names = ["눈사람", "얼음", "눈", "바람"];
  const nameList = names.map((name) => <li>{name}</li>);
  return <ul>{nameList}</ul>;
};

export default IterationSample;

// App.js
import Sample from "./Sample";
function App() {
  return (
    <div>
      <Sample />
    </div>
  );
}
export default App;

결과가 제대로 나오는 것을 볼 수 있다.

하지만 콘솔창을 확인해보면 Each child in a list should have a unique "key" prop 라는 경고가 나온다.

"key" prop이 없다는 경고 메시지다.

 

해결방법

해결하기에 앞서 리액트의 key에 대해 간단하게 이해하고 가보자.

key란?

리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내기 위해 사용하는 것이다.
key가 없다면 virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다.
하지만 key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있다.

key값을 설정할 때는 map함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 된다.

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

 

이 예제에서는 고유 번호가 없기 때문에 index를 활용해서 key값을 지정해주면 에러를 해결할 수 있다.

// Sample.js
import React from "react";

const IterationSample = () => {
  const names = ["눈사람", "얼음", "눈", "바람"];
  const nameList = names.map((name, index) => <li key={index}>{name}</li>);
  return <ul>{nameList}</ul>;
};

export default IterationSample;

하지만 고유한 값이 없을 때만 index 값을 key 값으로 활용해야 한다. index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못하므로 고유한 값이 있다면 그 값으로 key 값을 지정하자!