[ReactJs] 리액트 오류, 중복 key 사용

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.

 

 

이 오류는 리액트에서 key 속성이 중복될 때 발생한다. 리액트는 컴포넌트 리스트를 렌더링할 때 각 항목을 고유하게 식별하기 위해 key 속성을 사용한다. 이를 통해 리액트는 항목의 변경, 추가, 삭제를 효율적으로 처리할 수 있는데 이 key는 각 항목이 고유하지 않고 중복된 key가 있으면 React가 컴포넌트의 상태나 렌더링을 정확히 추적하지 못하게 되어 오류가 발생시킨다.

 

---

 

 

 

오류 원인

리스트를 렌더링할 때 각 항목에 대해 key 속성을 부여하는데, key 값이 동일한 값이 있을 경우, 리액트는 이를 구분하지 못하고 오류를 발생시킨다. 예를 들어, map 메서드를 사용하여 리스트를 렌더링하는데, key 값으로 항목의 id를 사용한다고 가정했을 때, id가 중복될 경우 이 오류가 발생한다.

 

 

오류 해결 방법

고유한 값으로 key를 사용하는지 확인하기

key로 사용하는 값이 고유한지 확인한다. 일반적으로 key는 각 항목을 고유하게 식별할 수 있는 값을 사용해야 한다. 보통 id나 다른 고유한 값을 사용한다.

만약 id가 중복될 가능성이 있다면, id 외의 다른 고유한 값을 추가하거나 배열의 인덱스를 key로 사용하여 고유한 값으로 사용해야 한다. 다만, 배열의 순서가 바뀌거나 항목이 동적으로 변경되는 경우 인덱스를 key로 사용하는 것은 권장하지 않는다.

{onerooms.map((room) => (
  <div key={room.id}> {/* room.id가 고유하지 않다면 다른 고유 값을 사용하세요 */}
    <div className="list-thumb">
      <img src={room.image} alt="room" />
    </div>
    <div>
      <h4>{room.title}</h4>
      <p>{room.content}</p>
      <p>{room.price} 원</p>
      <p>허위매물신고: {room.bad}</p>
    </div>
  </div>
))}

 

 

 

다른 값을 사용하거나 값을 결합하여 사용하기
예를 들어, id와 함께 다른 고유 값을 결합하여 key로 사용할 수 있다.

이렇게 하면 key 값이 중복되지 않도록 할 수 있다. id와 index를 결합하여 각 항목을 고유하게 식별할 수 있다.

{onerooms.map((room, index) => (
  <div key={`${room.id}-${index}`}> {/* id와 index를 결합하여 고유하게 만듦 */}
    <div className="list-thumb">
      <img src={room.image} alt="room" />
    </div>
    <div>
      <h4>{room.title}</h4>
      <p>{room.content}</p>
      <p>{room.price} 원</p>
      <p>허위매물신고: {room.bad}</p>
    </div>
  </div>
))}