[React] 로그인 시 사용자 정보 storage(저장소)에 넣기 (localstorage VS sessionstrorage)

 

 

로그인 했을 때 사용자 이메일을 storage에 넣어 보쟈

 

 

 

그전에 어떤 저장소에 넣으면 효과적일지 고민에 빠졌다.

 

아래는 local storage와 session storage의 차이점이다.

 

 

 

Local Storage

- 가볍게 사용 가능하다. 그러나 기능이 많지 않다.

- 최대로 저장할 수 있는 용량이 크지 않다.(5mb)

- 간단한 텍스트 데이터만 저장이 가능하다.

- 만료 기한이 없다.

- 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회한다.

 

 

Session Storage

- 브라우저를 끄면 지워진다.

- 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회한다.

 

가장 큰 차이점으로는 세션은 끄면 없어지는 것이고 로컬은 안지워지는 것이다!

 

 

 

둘은 동일한 메소드와 프로퍼티를 제공한다. 

 

•  setItem(key, value) - 키/값 쌍을 저장한다.
• getItem(key) - 키에 해당하는 값을 받아온다.
• removeItem(key) - 키와 해당 값을 삭제한다.
• clear() - 모두 다 삭제한다.
• length - 저장된 항목의 개수를 출력한다.

 

 

나는 이번에 세션을 선택했다.

 

 

자, 써보자!

 

먼저,

1. ID/Password가 맞는지 확인

2. 맞다면 session storage에 저장한다.

3. 메인페이지로 간다.

 

* 로그인 안했을 시 메뉴는 로그인/회원가입이 있지만, 로그인 후에는 로그인/회원가입은 없어지고 로그아웃 버튼만 있다.

** 로그아웃 버튼을 눌렀을 때,session storage를 지워준다

 

 

## Signin.js 버튼 클릭시 이벤트

  const onFinish = (values) => {
    const post = {
      email: values.email,
      password: values.password,
    };
    fetch("http://localhost:5000/signin", {
      method: "post",
      headers: {
        "content-type": "application/json",
      },
      body: JSON.stringify(post),
    })
      .then((res) => res.json())
      .then((json) => {
        console.log("json :", json);
        if (json === 1) {
          // navigate("/landing");
          sessionStorage.setItem("email", values.email);
          window.location.replace("/landing");
        } else {
          alert("똑디 입력바람");
        }
      });
  };

sessionStorage.setItem("email", values.email);

email이라는 키 값에 values.email이라는 값을 저장

 

## server.js /signin

app.post("/signin", (req, res) => {
  console.log(req.body);

  connection.query(
    "SELECT EXISTS (SELECT id_num FROM user WHERE user_email = (?) AND password = (?)) as success",
    [req.body.email, req.body.password],
    function (err, result, fields) {
      if (err) {
        throw err;
      } else {
        res.json(result[0].success);
      }
    }
  );
});

 

 

## App.js

import React, { useEffect, useState } from "react";
import { Link, Outlet } from "react-router-dom";
import Footer from "component/footer";

function App() {
  const [logState, setLogState] = useState();

  useEffect(() => {
    setLogState(sessionStorage.getItem("email"));
    console.log("logstate", logState);
  });
  return <div>{logState === null ? outLog() : onLog()}</div>;
}

const outLog = () => {
  return (
    <div>
      <h1>Templates</h1>
      <nav
        style={{
          borderBottom: "solid 1px",
          paddingBottom: "1rem",
        }}
      >
        <Link to="/landing">Landing</Link> | <Link to="/signin">Signin</Link> |{" "}
        <Link to="/signup">Signup</Link>
      </nav>
      <Outlet />
      <Footer />
    </div>
  );
};

const onLog = () => {
  const clearStorage = () => {
    sessionStorage.clear();
    window.location.reload();
  };
  return (
    <div>
      <h1>Templates</h1>
      <nav
        style={{
          borderBottom: "solid 1px",
          paddingBottom: "1rem",
        }}
      >
        <Link to="/landing">Landing</Link>
        <button onClick={clearStorage}>로그아웃</button>
      </nav>
      <Outlet />
      <Footer />
    </div>
  );
};

export default App;

 

 

useEffect를 사용하여 session storage에 있는 값을 받아오고 값이 있다면 onLog를 없다면 outLog페이지를 보이게 하려고 했다.

 

간단하게 삼항연산자를 통해 구현하여따

 

 

 

 

 

오늘도 열코 ~

대한민국 취준생들 모두 화팅~