조타이 소개. React 후크에서 Jotai 원자로

조타이는 간단합니다. 거기에는 하나의 개념이 있습니다: 원자. 당신은 그것과 함께 먹고, 그것과 함께 자고, 그것과 싸운다.
atom 함수로 원자를 생성합니다. React 로컬 상태와 마찬가지로 구성 요소에서 atom을 사용할 수 있습니다. useState 대신 useAtom 를 씁니다.

const textAtom = atom('hello')

const Input = () => {
  const [text, setText] = useAtom(textAtom)
  return <input value={text} onChange={(e) => setText(e.target.value)} />
}

이 구성 요소는 useState와 유사한 구성 요소와 동일한 방식으로 작동합니다.

const Input = () => {
  const [text, setText] = useState('hello')
  return <input value={text} onChange={(e) => setText(e.target.value)} />
}

원자는 로컬 상태보다 더 유연합니다. 그들은 구성 요소 외부에 있습니다. 구성 요소는 원자를 참조하지만 소유하지는 않습니다. 원자는 함께 구성될 수 있습니다. 컴포지션을 사용하면 파생 원자를 만들 수 있습니다. 파생 원자는 다른 원자에 종속된 데이터를 보유합니다. 소스 아톰의 값이 변경되면 파생된 아톰의 값도 변경됩니다.

const textLengthAtom = atom((get) => get(textAtom).length)

위의 Atom은 파생 원자입니다. 그 값은 textAtom 의 텍스트 길이입니다. 원하는 구성 요소에서 사용할 수 있습니다.

const TextLength = () => {
  const [length] = useAtom(textLengthAtom)
  return <div>Length: {length}</div>
}

Input 및 TextLength 구성 요소가 연결되어 있지 않습니다. 그들의 상태는 그들 외부에 사는 원자에서 비롯됩니다. 원하는 위치의 응용 프로그램에서 사용할 수 있습니다. 상태가 제대로 전파됩니다.

<Provider>
  <Container>
    <Input />
  </Container>
  <Container>
    <Column>
      <TextLength />
    </Column>
  </Container>
</Provider>

후크를 사용하여 React 애플리케이션을 빌드하는 경우 계속해서 Jotai에서 useState를 useAtom로 교체해 보십시오. npm i jotai로 Jotai를 설치합니다. TypeScript 선언과 함께 제공됩니다. 추가 입력을 찾을 필요가 없습니다.

표시된 코드는 Jotai 공식 예제를 기반으로 합니다. 체크아웃this code live .

문서 및 Jotai 코드의 더 많은 예제는 Jotai website을 확인하십시오.

확인하십시오.