React Native) Recoil에서 Duplicate atom key error 가 뜬다면

react native에서 문서대로 착실하게 recoil을 사용하던 중에 Duplicate atom key 에러를 마주쳤다. 처음에는 당황해서 구글링을 해봤는데 결론적으로는 그냥 무시하면 되는 에러였다(..?)

에러 문구만에도 설명되어 있듯이 production에서는 치명적인 문제지만, 개발중에 hot module replacement로 인한 문제는 무시해도 좋다고 한다.

에러에 대해 더 알아보려고 구글링을 해보니 주로 Next.js에서 발생하는 고질적인 문제라고 한다. (관련 링크) next.js는 개발중 파일이 변경되면 해당 페이지 항목을 다시 리빌딩하게 되는데 그때 이미 선언된 key와 동일한 key를 가진 atom이 다시 선언되어서 발생한다는 것이다.

React Native의 경우 일반적인 상황에서는 Duplicate atom key 에러가 발생하지 않지만, atom store 파일을 저장하면서 핫 리로드가 발생할 경우에는 Duplicate atom key 에러를 만날 수 있다. VSC에서 파일 저장을 눌러 핫 리로드를 발생시킬 때는 해당 파일을 우선적으로 실행하게 되는데, 만약 이 때 atom store 변경사항을 저장하여 핫 리로드가 발생되었다면 store 파일을 다시 실행하면서 이미 선언한 atom들을 다시 선언하기 때문에 Duplicate atom key 에러가 발생하는 것이다.

이 문제를 해결하는 방법은 두 가지가 있는데, 첫째로 라이브러리를 이용해 경고 자체를 무시하는 방법이고, 두번째는 난수생성을 이용해 key가 겹칠 일 자체를 만들지 않는 것이다. 난수생성은 uuid라는 랜덤 문자열 생성 라이브러리를 사용해도 되고, 간단하게 Math.random()을 사용해도 동일한 효과를 볼 수 있다.

const sampleState = atom({
  key:`sampleState:${Math.random()}`,
  default:"sample"
})

물론 React Native에서는 주구장창 뜨는 것도 아니고 가끔 atom store 페이지를 수정할 때나 만날 수 있는 경고이므로 아무런 조치도 취하지 않고 무시하는 것도 좋은 방법일 수 있다.