[react] FE 로그인/회원가입 구현 useState

jieun·2021년 4월 15일
4
post-thumbnail

//앱 미리보기 ⬆️
//리액트 프로젝트 '버튼 하나에 두 가지 경로 넣기 react-router-dom/useState'에서 이어집니다.

왓챠 UI를 참고하여 FE를 구현하도록 하겠습니다.

파일 생성

client/src/components/LoginPage.js 생성
client/src/components/RegisterPage.js 생성
client/src/components/LoginRegister.css 생성

LoginPage.js

import React, {useState} from 'react'
import "./LoginRegister.css"

function LoginPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState(""); 
  
  const onEmailHandler = (event) => {
    setEmail(event.currentTarget.value);
  }

  const onPasswordHandler = (event) => {
    setPassword(event.currentTarget.value)
}

  const onSubmit = (event) => {
    event.preventDefault();
  }

  return (
      <div class="loginregister">
        <form>
            <div><input name="email" type="email" placeholder="이메일" value={email} onChange={onEmailHandler} class="loginregister__input"/></div>
            <div><input name="password" type="password" placeholder="비밀번호" value={password} onChange={onPasswordHandler} class="loginregister__input"/></div>
            <div><button type="submit" onSubmit={onSubmit} class="loginregister__button">로그인</button></div>
        </form>
      </div>
    );
  }

export default LoginPage;

RegisterPage.js

import React, {useState} from 'react'
import "./LoginRegister.css"

function RegisterPage() {
  const [name, setName] = useState("")
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")

  const onNameHandler = (event) => {
    setName(event.currentTarget.value)
  }
  const onEmailHandler = (event) => {
      setEmail(event.currentTarget.value)
  }

  const onPasswordHandler = (event) => {
      setPassword(event.currentTarget.value)
  }

  const onConfirmPasswordHandler = (event) => {
      setConfirmPassword(event.currentTarget.value)
  }

  const onSubmit = (event) => {
    event.preventDefault()
    if(password !== confirmPassword) {
      return alert('비밀번호와 비밀번호확인은 같아야 합니다.')
    }
  }

  return (
    <div class="loginregister">
      <form>
          <div><input name="name" type="text" placeholder="이름" value={name} onChange={onNameHandler} class="loginregister__input"/></div>
          <div><input name="email" type="email" placeholder="이메일" value={email} onChange={onEmailHandler} class="loginregister__input"/></div>
          <div><input name="password" type="password" placeholder="비밀번호" value={password} onChange={onPasswordHandler} class="loginregister__input"/></div>
          <div><input name="confirmPassword" type="password" placeholder="비밀번호 확인" value={confirmPassword} onChange={onConfirmPasswordHandler} class="loginregister__input"/></div>
          <div><button type="submit" onSubmit={onSubmit} class="loginregister__button">계정 생성하기</button></div>
      </form>
    </div>
  );
}
export default RegisterPage;

LoginRegister.css


.loginregister {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.loginregister__input {
    width: 300px;
    height: 50px;
    padding-left: 10px;
    margin: 10px;
}
.loginregister__button {
    background-color: rgb(248, 47, 98);
    color: rgb(255, 255, 255);
    font-weight: 700;
    width: 100%;
    border-radius: 40px;
    height: 48px;
    margin-top: 10px;
}

App.js 수정

import React from "react";
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import Navbar from './components/Navbar';
import LandingPage from './components/LandingPage';
import LoginPage from './components/LoginPage';
import RegisterPage from './components/RegisterPage';

function App() {
  return (
    <Router>
      <div>
        <Navbar />
        <Switch>
          <Route exact path="/" component={LandingPage} />
          <Route exact path="/sign_in" component={LoginPage} />
          <Route exact path="/sign_up" component={RegisterPage} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;
profile
개발새발 블로그

0개의 댓글