초보 개발자의 성장 일기

[Recoil] Duplicate atom key 에러 메시지 제거 본문

Development/React JS

[Recoil] Duplicate atom key 에러 메시지 제거

YUNA 2024. 4. 17. 15:10

리액트 + ts로 프로젝트를 만들던 도중 고유한 atom key만 사용했는데도 불구하고 atom의 키가 중복되었다는 오류메시지가 나왔다.

 

 

atom에 있는 모든 키가 중복되었다는 에러가 나왔고 atom의 키를 바꿔도 같은 에러가 나타났다.

 

개발 환경에서 Recoil을 사용하면 파일이 변경되어 다시 빌드되는 과정에서 atom으로 만든 state가 재선언된다고 한다.

key는 고유한 값을 가져야하는데 재선언되는 과정에서 이미 key로 선언된 값을 key로 사용해서 문제가 발생하는 것이다.

recoil을 사용할 때 발생하는 고질적인 문제이며 기능상에는 문제가 없지만 무시하기엔 에러가 너무 많이 났다.

 

에러메시지를 없애기 위한 방법은 공식 문서에 잘 나와있다.

https://recoiljs.org/blog/2022/10/11/recoil-0.7.6-release/

 

Recoil 0.7.6 | Recoil

- Expose flag to disable "duplicate atom key" checking / logging, as it was too noisy in environments such as NextJS or some dev environments using Fast Refresh. (#733, #2020, #2046)

recoiljs.org

 

1. RecoilEnv를 패키지에서 불러온다.

import { RecoilEnv } from 'recoil';

 

2. 에러가 나는 atom이 있는 파일에 아래 문구를 넣는다.

RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false;

 

주의사항으로는 이렇게 하면 합법적인 오류를 포함하여 중복 키에 대한 모든 검사가 비활성화된다는 것이다.