Jotai

상태

React를 위한 기본적이고 유연한 상태 관리

Babel

이 플러그인은 Jotai 아톰에 대한 React Refresh 지원을 추가합니다. 이를 통해 React Refresh를 사용해 개발할 때 상태가 초기화되지 않도록 보장합니다.

babel 설정 파일과 함께 사용하는 방법:

{
  "plugins": ["jotai/babel/plugin-react-refresh"]
}

이 플러그인은 미리 정의된 아톰 함수 이름 목록(예: 'atom', 'atomFamily', 'atomWithDefault')을 인식합니다. 만약 커스텀 아톰 함수 이름을 사용한다면, 이를 명시적으로 제공하여 인식되도록 할 수 있습니다.

다음은 Babel 설정에서 이를 구성하는 방법입니다:

{
  "plugins": [
    ["jotai/babel/plugin-react-refresh", { "customAtomNames": ["customAtom"] }]
  ]
}

예제는 아래에서 확인할 수 있습니다.

Jotai는 Recoil과 달리 키가 아닌 객체 참조를 기반으로 동작합니다. 이는 아톰을 식별할 수 있는 식별자가 없다는 것을 의미합니다. 아톰을 식별하기 위해 debugLabel을 아톰에 추가할 수 있으며, 이는 React 개발자 도구에서 확인할 수 있습니다.

하지만 모든 아톰에 debugLabel을 추가하는 것은 번거로울 수 있습니다.

이 babel 플러그인은 아톰의 식별자를 기반으로 모든 아톰에 debugLabel을 자동으로 추가합니다.

이 플러그인은 다음과 같은 코드를:

export const countAtom = atom(0)

다음과 같이 변환합니다:

export const countAtom = atom(0)
countAtom.debugLabel = 'countAtom'

파일 이름을 기반으로 기본 내보내기도 처리합니다:

// countAtom.ts
export default atom(0)

이 코드는 다음과 같이 변환됩니다:

// countAtom.ts
const countAtom = atom(0)
countAtom.debugLabel = 'countAtom'
export default countAtom

프로덕션 빌드에서는 불필요한 오버헤드를 피하기 위해 이 플러그인을 비활성화하는 것이 좋습니다. 환경에 따라 Babel 설정에서 조건부로 포함시킬 수 있습니다.

babel 설정 파일을 사용하는 경우:

{
  "plugins": ["jotai/babel/plugin-debug-label"]
}

이 플러그인은 미리 정의된 아톰 함수 이름 목록(예: 'atom', 'atomFamily', 'atomWithDefault')을 인식합니다. 커스텀 아톰 함수 이름을 사용하는 경우, 이를 명시적으로 제공하여 인식되도록 할 수 있습니다.

Babel 설정에서 다음과 같이 구성할 수 있습니다:

{
  "plugins": [
    ["jotai/babel/plugin-debug-label", { "customAtomNames": ["customAtom"] }]
  ]
}

아래에서 예제를 확인할 수 있습니다.

Jotai는 Jotai를 위해 만들어진 플러그인을 포함한 babel preset을 제공합니다.

babel 설정 파일과 함께 사용할 수 있습니다:

{
  "presets": ["jotai/babel/preset"]
}

또한, 프리셋에 여러분의 아톰 이름을 제공할 수도 있습니다:

{
  "presets": [["jotai/babel/preset", { "customAtomNames": ["customAtom"] }]]
}