JotaiJotai

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

Provider

Provider

Provider 컴포넌트는 컴포넌트 하위 트리에 상태를 제공하기 위해 사용됩니다. 여러 개의 하위 트리에 대해 여러 개의 Provider를 사용할 수 있으며, 심지어 중첩해서 사용할 수도 있습니다. 이는 React Context와 동일하게 동작합니다.

만약 Provider 없이 트리에서 atom을 사용한다면, 기본 상태를 사용하게 됩니다. 이를 Provider-less 모드라고 부릅니다.

Provider는 다음과 같은 세 가지 이유로 유용합니다:

  1. 각 하위 트리에 다른 상태를 제공하기 위해
  2. atom의 초기값을 설정하기 위해
  3. 리마운트를 통해 모든 atom을 초기화하기 위해
const SubTree = () => (
  <Provider>
    <Child />
  </Provider>
)

Signatures

const Provider: React.FC<{
  store?: Store
}>

Atom 설정은 값을 보유하지 않습니다. Atom 값은 별도의 스토어에 저장됩니다. Provider는 스토어를 포함하고 컴포넌트 트리 아래에 atom 값을 제공하는 컴포넌트입니다. Provider는 React 컨텍스트 프로바이더와 비슷하게 동작합니다. Provider를 사용하지 않으면 기본 스토어를 사용하는 프로바이더 없는 모드로 동작합니다. 서로 다른 컴포넌트 트리에 대해 서로 다른 atom 값을 보유해야 할 때 Provider가 필요합니다. Provider는 선택적 프로퍼티 store를 받을 수 있습니다.

const Root = () => (
  <Provider>
    <App />
  </Provider>
)

store prop

Provider는 선택적으로 store prop을 받을 수 있습니다. 이 prop은 Provider 하위 트리에서 사용할 수 있습니다.

예제

const myStore = createStore()


const Root = () => (
  <Provider store={myStore}>
    <App />
  </Provider>
)

useStore

이 훅은 컴포넌트 트리 내에서 스토어를 반환합니다.

const Component = () => {
  const store = useStore()
  // ...
}
GitHubnpm