[RN]recoil 중복 키값 에러해결Expectation Violation: Duplicate atom key

[문제상황]

react-native에서 recoil를 사용중 

 

[Expectation Violation: Duplicate atom key "groupNameState". This is a FATAL ERROR in
      production. But it is safe to ignore this warning if it occurred because of
      hot module replacement.]

라는 에러를 만났다.

찾아보니 보통 Next.js 개발환경에서 많이 발생하는 에러라는데 SSR환경이 아닌 react-native에서 왜 이와 같은 현상이 일어나는 것인지 궁금했다. 공식문서를 살펴보니 Fast Refresh를 사용하는 환경에서도 일어나는 현상이라는데..

Fast Refresh? 리액트 네이티브 공식문서의 워크플로우엔 아래와 같이 설명이 되어있다. 

Fast Refresh는 React 구성 요소의 변경 사항에 대한 거의 즉각적인 피드백을 얻을 수 있는 React Native 기능입니다. 빠른 새로 고침은 기본적으로 활성화되어 있으며 React Native 개발자 메뉴 에서 "빠른 새로 고침 활성화"를 전환할 수 있습니다 . 빠른 새로 고침을 사용하면 대부분의 편집 내용이 1~2초 이내에 표시됩니다.

React Native에는 Fast Refresh 기능이 탑재되어있다 한다.

[해결방법]

크게 두가지 방법으로 오류를 해결할 수 있다.

 

첫번째 방법

이 방법은 공식문서에 나온 방법이며 중복 키값의 체킹을 해제하게 된다. 이렇게 하면 중복 atom 키에 대한 모든 검사가 비활성화되며, 합법적인 오류도 포함될 수 있으므로 주의해서 사용해야 한다.

 

1. 최상위루트에 .env 파일을 만들고

RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false 를 저장한다.

2. App.js 에 RecoilEnv를 임포트 해주고 아래 구문을 입력해준다.

import { RecoilEnv } from 'recoil';

RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false

 

두번째 방법

이 방법은 키값에 난수를 사용해 중복키를 방지하는 방법이다.

1. npm i --save-dev @types/uuid 라이브러리 설치

 

2. 아래와 같이 작성

import { atom } from "recoil";
import { v1 } from "uuid";
import { UserData } from "../types/mainType";

export const userState = atom<UserData | null>({
  key: `userState/${v1()}`
  default: null
});