Recoil入門① 主要機能の説明

はじめに

Recoil歴の短い若造なので間違っている点・こうしたほうがパフォーマンスにも良さそう！などがあればコメントいただけると助かります。
コメントの数だけスクワットします。冗談です。

Recoilの環境構築と主要機能

yarn add recoil

インストールできたけどRecoilって何者なの？？

Recoilは2020年5月にFacebookによって開発された状態管理ライブラリです。RecoilはReduxと同様にState管理ができるライブラリでもあります。
状態管理とは何か？？という方はこちらを一度目を通して見るとわかりやすいかと思います。
https://eh-career.com/engineerhub/entry/2019/05/23/103000

Recoil主要機能についての説明

Atom

Atomはデータストアのことを示しており、Atomを設定するとどのコンポーネントからでも参照することが可能になります。

export const todoListState = atom({
  key: "todoListState"
  default: []
})

ここで必要となるものはkeyとdefault値です。具体的に何かというとkeyはatomのidを設定し、defaultで初期値を設定します。

Selector

次はSelectorです。Selectorとはatomの値を加工した結果を返す処理を行ってくれます。

export const todoListSelector = selector({
  key: "todoList"
  get: ({ get }) => {
  const list = get(todoListState) 
  return list
  }
})

先ほど同様に解説していきます。selectorでは単なる読み出し以外にも、情報を加工したりする処理を記述することができます。上記のコードだと const listでtodoListStateというAtomを取得してそれを返すというだけの処理を行なっています。

まとめ

この記事ではRecoil入門　主要機能のまとめとなっており、最終的にはTodoList作成までやっていきたいと思いやす！！

参考文献

https://engineering.linecorp.com/ja/blog/line-sec-frontend-using-recoil-to-get-a-safe-and-comfortable-state-management/
https://qiita.com/tkmd35/items/b4630e53a907d96e3430