[에러 및 해결책] Warning: Each child in a list should have a unique "key" prop.

🚨 현재 발생하는 에러

 

map 함수를 사용하고 list태그를 사용할때 이와 같은 에러 발생했다. 

이유는 리액트 JSX 문법에서는 요소의 리스트를 나열할 때는 고유한 key값을 줘야한다.

 

⭐key는 리액트가 변경, 추가, 제거 되는 항목을 식별하는데 도움이  된다.

map 메소드에서 중괄호를 사용하면 반드시 return 사용 하자 📝

 

 

<li> 태그에 고유한 key 값을 주면 에러는 해결된다.

move는 history 배열의 고유한 index 값으로 리스트에 하나 씩 할당 하면 된다.

 

Key에는 고유한 값을 줘야한다. index는 비추천!

*만약 이 <li> 리스트 중 중간에 삭제되거나 삽입되는 경우가 있다면 key값을 index로 주면 안되고, 실질적인 고유한 값을 줘야한다. 

index 도 0부터 시작해서 고유한 값을 가지지만, 중간에 값이 추가되거나 제거 된다면 해당 리스트들의 key 값도 바뀌게 된다.