Each child in a list should have a unique "key" prop 오류를 해결해보자

리액트를 배우던 도중, 콘솔창을 보니 이런 에러가 뜨고 있었다. 

 

React에서 "Each child in a list should have a unique 'key' prop" 오류 메시지는, 일반적으로 React 컴포넌트가 리스트를 렌더링할 때 각 항목에 고유한 key 속성이 필요할 때 발생합니다. 이 오류는 주로 다음과 같은 상황에서 나타납니다:

1. 리스트 렌더링: map() 메서드 등을 사용하여 배열을 반복 처리하면서 JSX 요소를 생성할 때, React는 각 항목을 구분하기 위해 고유한 key를 필요로 합니다. key 속성은 React가 각 항목을 식별하고, 나중에 변경, 추가 또는 삭제될 때 해당 항목을 효율적으로 업데이트할 수 있도록 돕습니다.
2. 고유하지 않은 키: key 속성에 고유하지 않은 값을 지정하거나, 값을 아예 지정하지 않았을 때 이 오류가 발생할 수 있습니다. 예를 들어, 리스트의 인덱스를 key로 사용하는 경우, 리스트의 순서가 변경되면 React가 항목을 구분하기 어려워집니다.

이 문제를 해결하려면 리스트의 각 요소에 대해 고유한 key 값을 제공해야 합니다. key는 배열 내에서 고유해야 하며, 동일한 컴포넌트 인스턴스 내에서만 고유하면 됩니다.

 

수정 전 코드

 { shoes.map((a,i) => {

                    return <Card shoes = {shoes[i]} i={i} ></Card>

                  })}

 

수정 후 코드

 { shoes.map((a,i) => {

                    return <Card key = {i} shoes = {shoes[i]} i={i} ></Card>

                  })}

 

key 값을 추가해주니 해결!