리액트 Encountered two children with the same key

리액트 Encountered two children with the same key

문제 상황

react에서 무한 스크롤 구현 후 api 호출 마다 리스트에 아이템을 추가하는 과정에서 다음과 같은 오류가 발생하였다.

list의 item들이 렌더링은 정상적으로 되었으나 콘솔에서 오류가 발생하였다.

⚠️Warning: Encountered two children with the same key,

잘못된 코드

key가 중복되서 생기는 문제라는 것을 직관적으로 파악할 수 있었는데 key관련 코드들을 모두 수정해보았지만 해결하지 못했다.

item의 key인 서버로 부터 받아온 id값을 출력해보니 한번 렌더링할 때 중복되는 것은 아니고 api를 다시 호출 할때 기존 key와 중복되는 것 같다.

스크롤의 길이를 보니 한번 api 호출 시에 더 많은 item을 가져오는 것 같았다.

그래서 redux devtool로 확인을 해보니 스크롤을 내릴 때 api 호출을 2번 하게 되었고 id가 26번인 아이템부터 51번째에 다시 렌더링 되기 때문에 문제였다.

아무래도 가장 처음에만 로딩 상태에서 스켈레톤 UI가 렌더링 되도록 했었는데 처음 이후에 로딩 상태에서 아무런 처리도 하지 않아서 발생하는 문제 같다.

개선한 코드

Grid를 페이지 쪽에 집중하고 로딩 상태에서 스켈레톤 UI를 렌더링 하도록 하였다.

처음에만 skeleton UI가 나오지 않고 item이 로딩중일 때마다 skeleton UI가 나오도록 하고 싶었는데 오류 해결과 기능 개발까지 해결했다.