【React】ReactでCookieを使ってみよう

まずは、インストールから。

npm install react-cookie

続いてcookieのモジュールをインポートします。
cookieを使いたい場所で下記を記載しましょう。

import { useCookies } from "react-cookie";

これでReactでcookieを使う準備が整いました。

では、cookieに値を保存することをやってみましょう。
まずはこんな感じでコードを書きます。
下記の"auth_token"は変数名に該当し、
["token"]はキー名になります。
ここの名前はなんでみも好きなように設定して構いません。
(※今回はSPAを開発してて、トークンをクッキーで管理したかったのでtokenというネーミングにしています。)

const [auth_token, setCookie] = useCookies(["token"]);

useStateを使ったことのある人なら、書き方が似ているので
飲み込みやすかもしれません。
では、値を保存する記述です。
上記のsetCookieの部分が関数になっていて、値を保存する際にこの関数を使います。こんな感じです。

setCookie("token",保存したい値)

これで、"token"というキー名に対して値をcookieに保存できました。

ちなみに、cookieから値を取り出したい場合は
"変数名.キー名"で値を取り出せます。
例えば、コンポーネントのhtmlタグ内で値を使いたい場合はこんな感じになります。

<p>{auth_token.token}</p>

とりあえあず、今回はこれで以上です。