react-cookieでcookie管理をする。

どんな時にcookie管理が必要？

cookie管理は認証周りの実装に必要不可欠です。
特にフロントエンドとバックエンドが分かれている場合では、
バックエンドからトークンを取得しそのトークンをcookieに保存することで、
そのサイトにアクセスするためにユーザーが行う認証を省くことができるのです。
今回はトークンを取得するとなるとテーマから逸れてしまうので、
実際にreact-cookieというreactライブラリを使用したcookie管理を紹介します。

create-react-appでサクッと環境構築

npx create-react-app cookie-practice
cd cookie-practice

react-cookieをインストール

公式はこちら

npm install react-cookie
	or
yarn add react-cookie

index.jsに追記

まず、index.jsに{CookiesProvider}をインポートします。
<CookiesProvider>で<App/>を囲うことで、
<App/>内でreact-cookieが適用されます。

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
+ import { CookiesProvider } from "react-cookie";

ReactDOM.render(
  <React.StrictMode>
+   <CookiesProvider>
      <App />
+   </CookiesProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.jsに追記

今回は作るアプリでは、
フォームに名前を入力し、
保存ボタンを押すとcookieに名前が保存→ボタンの横に名前が表示されます。
削除ボタンを押すとcookieに保存した名前が削除されるシンプルなものです。

inputタグに入力された値はuseStateで管理します。
cookieの管理はuseCookiesというHooksを使用することで、
簡単にcookieの保存、削除を実装できます。

App.js

import React, { useState } from "react";
import { useCookies } from "react-cookie";
import "./App.css";

function App() {
  const [name, setName] = useState();
  const [cookies, setCookie, removeCookie] = useCookies();

  const handlerChange = (e) => {
    setName(e.target.value);
  };
  const handlerDelete = () => {
    removeCookie("name");
  };
  const handleSubmit = () => {
    setCookie("name", name);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <label>
          <input type="text" name="name" onChange={handlerChange} />
        </label>
        <input type="submit" value="保存" />
        <button onClick={handlerDelete}>削除</button>
        {cookies.name}
      </form>
    </div>
  );
}

export default App;

まとめ

実務では、
認証周りでトークンを保存する際などに有効です。
バックエンドによってはこの実装が必要のないパターンもあるかもしれませんが、
念のため選択肢とするに越したことはないでしょう。