[Next.js] Recoil : Duplicate atom key 이슈

Next.js 개발 중 파일이 변경되면 다시 빌드되는 과정에서 atom으로 만든 state가 재선언된다.

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

Next.js 개발 중 recoil을 사용할 때 발생하는 고질적인 문제인 것 같다. 기능적으로는 문제가 없다고한다.

문제를 해결하는 방법으로는

interrupt-stdout 모듈을 사용해서 에러메세지를 무시하는 방법과

난수를 사용해서 에러메세지가 뜨지 않게 하는 방법이 있다.

해결

난수 생성해주는 uuid 모듈 설치 (typescript)

npm i --save-dev @types/uuid

key 에 난수 추가하기

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

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