[React] Warning: Encountered two children with the same key 오류 해결 방법

🚨 Chrome 개발자 도구에서 발생한 에러 메시지

Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

❓에러 발생 이유

React는 React 엘리먼트를 렌더링 할 때 Diffing이라는 작업을 진행합니다.
그러기 위해서는 유니크한 Key 값이 필요합니다.
하지만, 유니크한 Key 값이 아닌 경우라면 Key 값의 중복이 발생하게 되면서
React 리스트 엘리먼트를 구분할 수 없게 됩니다.
그렇기 때문에 해당 에러 메시지를 나타내게 됩니다.

 

✅ 해결 방법

아래 예시 코드에서 이전 코드는 해당 오류 메시지를 나타냅니다.

여기서 간단하게 오류를 해결하는 방법은
React 리스트 엘리먼트의 중복된 값인 { id: 1, name: "Item 4" }를 삭제하면 됩니다.

수정 코드를 참고해 주세요.

 

예시 코드

이전 코드

export const MainPage = () => {
  const items = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" },
    { id: 1, name: "Item 4" }, // 중복된 id
  ];

  return (
    <div>
      <h1>Item List</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

 
수정 코드

export const MainPage = () => {
  const items = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" }
  ];

  return (
    <div>
      <h1>Item List</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

 

✔️ 에러 발생 시 체크 리스트

• API를 중복해서 호출하고 있는 것이 아닌지를 확인해 봅니다.
• 데이터를 정제하고 있는 과정에서 중복 데이터가 발생하는지를 확인해 봅니다.