React 상태 관리 라이브러리 Jotai의 시작 방법 #JotaiFriends

이 글은 공식 Doc의 introduction 페이지을 기초로 한 것이다.자세한 내용은 공식 문서를 참고하세요.
https://github.com/pmndrs/jotai/blob/v1.5.2/docs/introduction.mdx는 소스다.

Jotai란 무엇입니까?

자그마한 설명 조타.React 상태 관리 라이브러리 중 하나인 Jotai에는 다음과 같은 특징이 있습니다.

아래에서 위로 올라가는 방법형 상태 관리 라이브러리(단일한 State가 아니라 여러 개의 State를 자유롭게 전역적으로 정의하고 이용한다. 하나의 State를 Atom이라고 부른다)

소형 API

Atom에 고유한 Key를 설정할 필요가 없음(Recoil 필요)

Provider 모드 없음

Type Script에서 개발

Jotai 개념여기 기사.에 대해 설명합니다.

설치 방법

$ npm install jotai
or 
$ yarn add jotai

Atom의 정의 방법(글로벌 State 정의)

Atom은 State의 한 종류를 나타냅니다.atom(initialValue) 이렇게 써서 Tom을 정의한다.
원시 값부터 그룹과 대상까지 자유롭게 처리할 수 있습니다.필요한 수량을 정의할 수 있습니다.
atoms.js

import { atom } from 'jotai'

export const countAtom = atom(0)
export const countryAtom = atom('Japan')
export const citiesAtom = atom(['Tokyo', 'Kyoto', 'Osaka'])
export const mangaAtom = atom({ 'Dragon Ball': 1984, 'One Piece': 1997, Naruto: 1999 })

물론 자신의 취향에 따라 파일을 정의할 수 있다.

어셈블리에서 Atom 사용

React.useState()와 같이 사용할 수 있습니다.const [count, setCount] = useAtom(countAtom).const [count, setCount] = useState(0)에 비하면 그렇긴 한데)
Counter.jsx

import { useAtom } from 'jotai'
import { countAtom } from '../atoms.js'

function Counter() {
  const [count, setCount] = useAtom(countAtom)
  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(c => c + 1)}>one up</button>
    </div>
  )
}

countatom은 전 세계입니다.다른 구성 요소도 마찬가지로 사용할 수 있다.

데리브드 아톰을 해보도록 하겠습니다.

아톰에서 파생 아톰을 제작할 수 있다.예를 들어countatom을 파생원으로 하여countatom의 값을 배로 늘린 Atom을 정의합니다.
DoubleCounter.jsx

import { countAtom } from '../atoms.js'

const doubledCountAtom = atom((get) => get(countAtom) * 2)

function DoubleCounter() {
  const [doubledCount] = useAtom(doubledCountAtom)
  return <div>{doubledCount}</div>
}

방금 Tom의 정의에서 값을 지정했는데 이번에read 함수(get) => get(countAtom) * 2로 Read-onlyatom을 정의합니다.

Writable Derived Atom이란?

어떤 Tom을 파생원으로 편집할 수 있습니다.어떻게 된 거야?
Counter.jsx

const countAtom = atom(0)
const addingCountAtom = atom(
  (get) => get(countAtom), // read関数ではそのままcountAtomの値を返す
  (get, set, num) => { // write関数では与えられた値を加算する
    set(countAtom, get(countAtom) + num)
  }
)

function Counter() {
  const [count, add] = useAtom(addingCountAtom)
  return (
    <div>
      <div>{count}</div>
      <button onClick={() => add(Math.random())}>Add random number</button>
    </div>
  )
}

tom()는 초기값,read함수,read함수,write함수 세 가지 인자를 얻을 수 있습니다.
Writable derived atom은 read 함수와 write 함수를 제공하는 atom()을 말합니다.사용법이 쉽게 연상되는 게usereducter()인가.

Write only atoms

read 함수null을 주면 Write-only의 tom을 정의할 수 있습니다.다양한 아톰을 조작하고 싶을 때 편리해요.

const multiplyCountAtom = atom(null, (get, set, by) => set(countAtom, get(countAtom) * by))

function Controls() {
  const [, multiply] = useAtom(multiplyCountAtom)
  return <button onClick={() => multiply(3)}>triple</button>

Derived async atoms

비동기 처리를 하는 tom을 정의할 수 있습니다.(이 작법은 최소한 <Suspense> 신선도를 유지하는 구성 요소 트리에서 atom을 사용해야 한다)

const urlAtom = atom("https://json.host.com")
const fetchUrlAtom = atom(
  async (get) => { // read関数をasync関数とできる
    const response = await fetch(get(urlAtom))
    return await response.json()
  }
)

function Status() {
  // 上記のasync関数が終了次第、再レンダリングされます
  const [json] = useAtom(fetchUrlAtom)

Async actions

async의 write 함수도 정의할 수 있습니다.(코드에서 async의read 함수를 사용하지 않으며, write 함수가 async를 만들려면 Suspense 패키지를 사용할 필요가 없습니다.)

const fetchCountAtom = atom(
  (get) => get(countAtom),
  async (_get, set, url) => {
    const response = await fetch(url)
    set(countAtom, (await response.json()).count)
  }
)

function Controls() {
  const [count, compute] = useAtom(fetchCountAtom)
  return <button onClick={() => compute("http://count.host.com")}>compute</button>

끝말

어때?쉽죠, 쉽죠?(말투가 강렬하다)
아주 오래전, 레드ux를 시작했을 때를 생각하면 이렇게 간단했으면 좋겠다는 의심이 든다.
단점을 높이면 너무 자유롭지 않을까.하지만 이것은 엔지니어들이 솜씨를 보여주는 곳입니다. 제가 보기에 오늘의 ◯◯을 찾아보세요.💪
농담은 차치하고 꼭 써 보세요.특히 콘텍스트 지옥이 됐고 레드ux에 들어가고 싶지 않은 분들은 이게 제일 잘 어울릴 것 같아요.

Jotai에 대한 소개 특집입니다.

이 기사는 조타 프렌즈의 조타 소개 특집 기사 중 하나다.기사 일람표는 여기.부터 시작하세요.

Jotai Friends란 무엇입니까?

조타의 팬으로서 엔지니어들에게 더 많은 조타이를 알리고 사용하고 싶다는 생각에서 출발했다.
https://jotaifriends.dev/
아직 준비 중이니 앞으로도 잘 부탁드립니다!
(관심 있는 사람은 반드시 Jootaifriends.dev에 메일 주소를 등록하세요🙏)