Provider

---

Provider componet는 componet 하위 트리에 대한 상태를 제공합니다. 여러 하위 트리에 여러 Provider를 사용할 수 있으며 중첩될 수도 있습니다. 이는 React Context와 동일하게 작동합니다.

Provider 없이 트리에서 atom을 사용하는 경우 기본 상태를 사용합니다. 이는 소위 provider-less mode 입니다.

Providers는 다음 세 가지 이유로 유용합니다.

1. 각 하위 트리에 대해 서로 다른 상태를 제공합니다.
2. 원자의 초기값을 수용합니다.
3. 다시 마운트하여 모든 원자를 제거합니다.

const SubTree = () => (
  <Provider>
    <Child />
  </Provider>
)

Signatures

---

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

Atom 구성은 값을 보유하지 않습니다. Atom 값은 별도의 저장소에 있습니다. Provider는 store를 포함하고 구성 요소 트리 아래에 atom 값을 제공하는 component입니다. Provider는 React context provider처럼 작동합니다. Provider를 사용하지 않으면 default store를 사용하여 provider-less mode로 작동합니다. 서로 다른 component 트리에 대해 서로 다른 atom 값을 보유해야 하는 경우 provider가 필요합니다. Provider는 선택적 prop store를 사용할 수 있습니다.

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

store props

---

Provider는 provider 하위 트리에 사용할 수 있는 선택적 prop store를 허용합니다.

예시

const myStore = createStore()

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

useStore

---

이 hook은 component 트리 내의 store를 반환합니다.

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