Recoil Atom의 타입 지정

Recoil Atom의 타입 지정

드디어 실무에서 State Management 라이브러리를 사용하게 되었는데 Atom에 Type을 지정하는 중 갑자기 NextJS가 먹통이 되는 바람에 수 시간동안 골머리를 싸매야 했다. 간단하게 보면 useState에 타입을 지정하는 것과 동일한 방식이지만 나와 같이 “Generating static pages” 에러가 발생한 사람들에게 도움이 되고자 정리해본다.

---

 

문제의 코드

import { atom, selector, RecoilEnv, RecoilState } from 'recoil'

RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false

const customAtom: RecoilState<{
    stateA: number | null
    stateB: string | null
  }> = atom({
    key: customAtom',
    default: {
      stateA: null,
      stateB: null,
    },
})

export const contractUserAtomSelector = selector({
    key: customAtom',
    get: ({ get }) => get(contractUserAtom),
    set: ({ set }, newStatus) => set(contractUserAtom, newStatus),
})

문제를 해결한 코드

import { atom, selector, RecoilEnv } from 'recoil'

RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false

const customUserAtom = atom<{
    stateA: number | null
    stateB: number | null
  }>({
    key: 'customAtom,
    default: {
    stateA: null,
    stateB: null,
    },
})
// … 이하동일

 

 

위와 같이 atom 객체 자체의 type을 지정하지 않고 atom 내부에 type을 지정하여 해결하였다.