설치

이 기능을 사용하려면 optics-ts와 jotai-optics를 설치해야 합니다.

npm install optics-ts jotai-optics

focusAtom

focusAtom은 여러분이 전달한 포커스를 기반으로 새로운 아톰을 생성합니다. 이는 지정된 아톰의 특정 부분에 초점을 맞춘 파생 아톰을 만들며, 파생 아톰이 업데이트되면 원본 아톰도 해당 업데이트를 알림 받고 동등한 업데이트가 수행됩니다.

다음 예제를 보세요:

const baseAtom = atom({ a: 5 }) // PrimitiveAtom<{a: number}>
const derivedAtom = focusAtom(baseAtom, (optic) => optic.prop('a')) // PrimitiveAtom<number>

기본적으로, 우리는 PrimitiveAtom<{a: number}>로 시작했는데, 이는 getter와 setter를 가지고 있습니다. 그리고 focusAtom을 사용해 baseAtom의 a 속성에 초점을 맞춘 PrimitiveAtom<number>를 얻었습니다. 여기서 주목할 점은 이 derivedAtom이 단순히 getter가 아니라 setter도 된다는 것입니다. 만약 derivedAtom이 업데이트되면, baseAtom에도 동등한 업데이트가 수행됩니다.

아래 예제는 간단하지만 시작점입니다. focusAtom은 Lens, Prism, Isomorphism을 포함한 다양한 종류의 옵틱을 지원합니다.

더 고급 옵틱을 보려면 다음 예제를 참고하세요: https://github.com/akheron/optics-ts

예제

import { atom } from 'jotai'
import { focusAtom } from 'jotai-optics'

const objectAtom = atom({ a: 5, b: 10 })
const aAtom = focusAtom(objectAtom, (optic) => optic.prop('a'))
const bAtom = focusAtom(objectAtom, (optic) => optic.prop('b'))

const Controls = () => {
  const [a, setA] = useAtom(aAtom)
  const [b, setB] = useAtom(bAtom)
  return (
    <div>
      <span>a의 값: {a}</span>
      <span>b의 값: {b}</span>
      <button onClick={() => setA((oldA) => oldA + 1)}>a 증가</button>
      <button onClick={() => setB((oldB) => oldB + 1)}>b 증가</button>
    </div>
  )
}

Stackblitz