Recoilの適用

このドキュメントでは、reactプロジェクトでrecoilモジュールを使用する方法の簡単な使い方をまとめます.

概要

私が知っているReactで主に使用している状態管理ライブラリはReduxとRecoilです.Reactに組み込まれている状態管理機能のみを使用する場合は、いくつかの問題があります.
1.各構成部品のステータスはドラッグ＆ドロップで管理できますが、不要な構成部品が再表示されます.
2.Contextのみでは解決できません(Contextは1つの値しか保存できません)
3.ステータス管理を向上させることで実現すると、コードの高可読性を実現することは困難である.
そこで、Reduxでステータス管理を行いました.最近、ステータス管理ライブラリRecoilに興味があるので、このドキュメントでは簡単な使い方と定義をまとめました.

Recoil

Recoilはステータス管理ライブラリです.Recoilを使用して、AtomsからSelector、Reactコンポーネントまでのデータフローチャートを作成します.Atomsは、エレメントが購読可能な単位であり、セレクタによってAtomsのデータ型を同期または非同期で変換することができる.(出版:recoil doc)

Atoms

ステータス単位.構成部品で変更および購読できます.作成されたAtomsは、構成部品の任意の場所で共有され、変更が発生したときに構成部品を再描画します.
きほんけいじょう

const exampleState = atom({
	key: [unique key],
    default: ""
 })

atomでは、keyはグローバルで一意であり、デフォルト値を持つ必要があります.構成部品:
1.useRecoilState:useState hookはほぼ同じです.値またはアクセス値を格納できます.
2.ユーザSetRecoilState:atom値の変更
3.userRecoilValue:atom値へのアクセス

Selectors

純関数です.ステータスベースの派生データをセレクタで計算します.最小の状態セットはAtomsに格納され、対応する派生データはSelectorによって処理される.使用方法はatomsと同じです.背中のフックを利用する.
きほんけいじょう

const dataState = selector({
	key: [unique key],
    get: ({get}) => {},
    set: ({set}) => {}

生成された原子にはget:get関数でアクセスできます.ここに必要なデータだけを返します.
set:set関数でatoms値も変更できます.セレクタからアクセスしたデータからatomの値を変更する必要がある場合は、これを使用します.

参考文献

https://recoiljs.org/ko/docs/introduction/getting-started/