Jotai는 여러분이 React 개발의 기본으로 돌아가 모든 것을 간단하게 유지할 수 있게 해주는 라이브러리입니다.

처음부터 시작하기

Jotai를 이전에 알고 있던 것들과 비교하기 전에, 아주 간단한 것부터 바로 시작해 보겠습니다.

React 세계는 우리의 세계와 매우 비슷합니다. 작은 개체들로 이루어진 큰 집합체이며, 우리는 이를 컴포넌트라고 부릅니다. 그리고 이 컴포넌트들은 각자의 상태를 가지고 있습니다. 여러분의 컴포넌트를 구조화하여 서로 상호작용하게 만들면 앱이 완성됩니다.

이제 Jotai 세계도 작은 개체인 아톰(atom)을 가지고 있으며, 이 아톰들도 각자의 상태를 가지고 있습니다. 아톰들을 합성하면 여러분의 앱 상태가 만들어집니다!

Jotai는 모든 것을 아톰으로 간주합니다. 따라서 여러분은 이렇게 말할 수 있습니다: "흠, 객체와 배열이 필요하고, 이를 필터링한 다음 정렬해야 해." 그리고 여기서 Jotai의 아름다움이 드러납니다. Jotai는 더 단순한 아톰에서 파생된 단순한 아톰을 우아하게 생성할 수 있게 해줍니다.

예를 들어, 2개의 탭이 있는 페이지가 있다고 가정해 봅시다: 온라인 친구와 오프라인 친구. 저는 단순한 공통 소스에서 파생된 2개의 아톰을 가질 것입니다.

const dumbAtom = atom([{ name: 'Friend 1', online: false }])
const onlineAtom = atom((get) => get(dumbAtom).filter((item) => item.online))
const offlineAtom = atom((get) => get(dumbAtom).filter((item) => !item.online))

그리고 여러분은 이 복잡성을 계속해서 확장할 수 있습니다.

Jotai의 또 다른 놀라운 기능은 비동기 아톰을 사용할 때 내장된 일시 중단(suspend) 기능입니다. 이는 비교적 새로운 기능으로 더 많은 실험이 필요하지만, 확실히 우리가 React 앱을 구축하는 방식의 미래입니다. 더 많은 정보는 문서를 확인하세요.