React で Cookie を設定する

1. React の Cookie
2. React における Cookie の構造
3. React で Cookie を設定する

React 開発者は、アプリケーションの効率と速度を向上させることで、ユーザー エクスペリエンスを向上させることを目指しています。 場合によっては、Cookie を使用して大きな効果を上げ、ユーザーのエクスペリエンスを向上させることができます。

この記事では、React で Cookie を設定する方法を紹介します。

React の Cookie

Cookie は、サーバーにデータのビットを保存する方法を管理するのに役立つ HTTP コードのビットであるため、ユーザーが次回 Web サイトにアクセスしたときに自動的に使用できるようになります。

たとえば、この情報は、ユーザー名、電子メール、ユーザーのショッピング カート、閲覧履歴などです。 Cookie は、ユーザーが以前のセッションをシームレスに再開するのに役立ちます。

React は、シングルページ アプリケーションの構築に使用されます。 データはサーバーからロードされないため、React に Cookie を保存するためのカスタム アプローチを実装する必要があります。

JavaScript ベースのフレームワークを扱っているため、JavaScript でネイティブに利用可能な document Web インターフェイスを使用します。

React における Cookie の構造

Cookie は通常、名前と値 のペアとして構造化されています。 たとえば、これは次のセッションまでユーザーのログインを記憶するための Cookie です。

document.cookie = `login=sample@gmail.com`

ご覧のとおり、document インターフェイスの cookie プロパティを使用し、name-value ペアと同じ値に設定しました。

Cookie には、期限切れになる時期など、その他の詳細を含めることができます。 パラメータが指定されていない場合、ユーザーがブラウザを閉じると Cookie は削除されます。

JavaScript で複数の name-value ペアの Cookie を設定する場合は、次のようにセミコロンで区切ります。

document.cookie = `name=value; expires=expirationTime; path=domainPath`

React で Cookie を設定する

実際の例を見てみましょう。 ここでは、React に単純な App コンポーネントがあります。

export default function App() {
    const handleClick = () => {
        document.cookie = "username=admin";
        console.log(document.cookie);
    };
    return (
        <div className="App">
            <h1>Hello CodeSandbox</h1>
            <button onClick={() => handleClick()}>Set cookies</button>
        </div>
    );
}

この例では、handleClick() メソッドで Cookie を設定し、ボタンをクリックして開始します。 または、ライフサイクル メソッドまたは useEffect フックを使用して、コンポーネントのマウント、アンマウント、または更新のたびに Cookie を設定できます。

この ライブ デモ で、自分で Cookie を設定してみることができます。 新しいタブでプレビューを開く必要があることに注意してください。 そうしないと、コンソールで更新された Cookie を確認できません。