데이터베이스 없이 localStorage를 이용해서 간단한 로그인폼을 구현해보자.
(프로젝트를 진행하면 할수록 로컬스토리지로는 한계를 느끼고 데이터베이스에 대한 중요성과 필요성을 더욱 느끼게 되었음..)

📖 목차

• 실행화면
• 프로젝트 구상하기
• 개발환경 세팅하기
• 프로젝트 코드

---

실행화면

---

프로젝트 구상하기

1. server가 시작되면 로컬스토리지로 데이터를 모두 가져온다.

2. 로그인창

   • 로컬스토리지의 이메일과 비밀번호가 일치한다면 Home으로 이동한다.
   • 이메일과 비밀번호 둘 중 하나라도 일치하지 않는다면 alert 메시지가 뜬다.
   • 간단한 회원가입을 위한 버튼이 있다.

3. 회원가입

   • 로그인창에서 회원가입 버튼을 누르면 창이 바뀌지 않고 회원가입 form이 생긴다.
   • 입력받은 이메일이 중복된 이메일이라면 "다른 이메일을 입력"하도록 하는 알림이 뜬다.
   • 계정을 생성하면 "계정이 생성되었다"는 알림이 뜬다.

---

개발환경 세팅하기

1. 빠르게 react 프로젝트 시작하기

   • npx create-react-app 프로젝트명

2. react-router-dom 사용하기

   • npm install react-router-dom

3. 디렉토리 구조

-src/
    -index.js
    -App.js
    -userData.js
    -components/
          -Login.js
          -CreateAccount.js
          -Home.js

---

프로젝트 코드

App.js

• 로그인창과 유저정보를 import 한다.
• USERS로 로컬스토리지에 유저정보를 넣는다.
• Login 창을 렌더링한다.

import React from "react";
import "./css/style.css";
import Login from "./components/Login";
import { usersInfo } from "./userData";

function App() {
  localStorage.setItem("USERS", JSON.stringify(usersInfo));

  return (
    <>
      <Login />
      <footer>&copy; {new Date().getFullYear()} notion</footer>
    </>
  );
}

export default App;

---

Login.js

• react-hooks 의 useState를 사용하여 상태관리를 한다.
• 상태가 바뀌었을 때, 렌더링 될 CreatAccount와 Home을 import한다.

useState

const [login, setLogin] = useState(false);
const [disabled, setDisabled] = useState(false);
const [toggleBtn, setToggleBtn] = useState(false);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

login : 로그인창의 상태
disabled : 로그인 버튼을 연속해서 클릭하지 않도록 클릭하면 회원유무를 확인하는 동안 버튼이 비활성화되도록 한다.
toggleBtn : 회원가입을 위한 버튼, 클릭하면 회원가입 폼이 렌더링된다.

---

email, password 에 input값 대입하기

const onChange = (event) => {
    const {
      target: { name, value },
    } = event;
    if (name === "email") {
      setEmail(value);
    }
    if (name === "password") {
      setPassword(value);
    }
  };

---

form 제출 시

const onSubmit = async (event) => {
    const USER = JSON.parse(localStorage.getItem("USERS"));
    event.preventDefault();
    setDisabled(true);
    await new Promise((r) => setTimeout(r, 1000));
    if (
      USER.find((user) => user.email === email && user.password === password)
    ) {
      const currentUser = USER.find((user) => user);
      setLogin(true);
      localStorage.setItem("currentUser", JSON.stringify(currentUser));
    } else {
      alert("정보가 없습니다.");
    }
    setDisabled(false);
  };

1. 함수는 비동기로 실행된다.
2. form 제출 시 setDisabled로 버튼을 비활성화 시킨다.(광클방지)
3. 에러방지를 위해 의도적으로 1초를 지연시켰다.

---

회원가입하기 버튼을 눌렀을 때

<div>
  Do you haven't account? Sign Up! very simple
  <button onClick={() => setToggleBtn(!toggleBtn)}>
    {toggleBtn ? "X" : "Sign Up"}
  </button>
</div>
<div>
    {toggleBtn ? (
     <>
     <CreateAccount />
     </>
     ) : (
       <></>
     )}
</div>