Framer motion 에러: Encountered two children with the same key ``

한동안 골머리를 앓게 만들었던 에러가 있다. 바로 Encountered two children with the same key 에러인데, 에러가 발생하는 위치를 정확히 알 수 없어서 헤맸다.

어느날부터 이 에러가 모든 페이지를 렌더링할 때 발생했고, 기능 개발에는 큰 문제가 없었지만 콘솔창에 계속 떠서 불편했다.

처음에는 map 함수에서 요소들을 렌더링할 때 키가 중복되는 게 원인이라고 생각해서 관련된 모든 코드를 확인해봤는데 중복되는 키는 없었다. 또한 키로 빈 값이 들어가는 경우도 없었기 때문에 이 부분이 문제가 아니라는 것을 알 수 있었다.

결국 혼자 해결하지 못하고 현업 개발자 분께 질문을 드렸고 너무나 감사하게도 에러 원인을 찾아주셨다. Framer motion에서 AnimatePresence 를 사용할 때 바로 오는 자식 요소는 unique key를 가지고 있어야 하는데, 그렇지 않아서 각 요소에 빈 값의 키가 들어가게 됐고 중복되는 에러가 발생한 것이었다.

보통 이런 경우에는 unique key를 가지고 있어야 한다는 에러를 보이는데, 그렇지 않고 key가 중복됐다는 에러가 떠서 발견하기 어려웠던 것 같다. 기술을 사용할 때 공식문서를 꼼꼼히 읽어보는 버릇을 들여야겠다. 전혀 아닐 것 같던 곳에서 에러가 발견되다니… 꺼진 코드도 다시보자!