[React] 투두리스트 로그인 구현하기2

이번 시간에는 리액트 라우터 돔의 라우팅을 통해 메인페이지, 로그인, 회원가입 페이지를

 

분리해보도록 하겠습니다.

 

먼저 app.js에 루트(경로)들을 만들어 줍니다.

import {BrowserRouter, Routes, Route} from "react-router-dom";

 

import를 해주고

function App() {

  return (

    <BrowserRouter>

       <GlobalStyle />

      <Routes>

        <Route path = "/" element = {<Login/>}/>

        <Route path = "/todo" element = {<Todo/>}/>

        <Route path = "/register" element = {<Register/>}/>

      </Routes>  

    </BrowserRouter>

  );

}

 

루트를 만듭니다.

import React, { useState } from 'react';

import styled from 'styled-components';

import { useNavigate } from 'react-router-dom';

const TodoTemplateBlock = styled.div`

  width: 512px;

  height: 768px;

  position: relative; /* 추후 박스 하단에 추가 버튼을 위치시키기 위한 설정 */

  background: white;

  border-radius: 16px;

  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);

  margin: 0 auto; /* 페이지 중앙에 나타나도록 설정 */

  align-items: center;

  justify-content: center;

  margin-top: 96px;

  margin-bottom: 32px;

  display: flex;

  flex-direction: column;

`;

const form = styled.div`

  display: flex;

  align-items: center;

  justify-content: center;

  color: #dee2e6;

  font-size: 24px;

  cursor: pointer;

  opacity: 0;

  &:hover {

    color: #ff6b6b;

  }

`;

function TodoTemplate() {

const navigate = useNavigate();

const[Email,setEmail] = useState("")

const[Password,setPassword] = useState("")

const[ConfirmPassword,setConfirmPassword] = useState("")

const onEmailHandler = (event) =>{

  setEmail(event.currentTarget.value)

}

const onPasswordHandler = (event) =>{

  setPassword(event.currentTarget.value)

}

const onSubmitHandler = (event) =>{

  event.preventDefalt();

}

const navigateToTodo = () =>{

    navigate("/todo");

}

const navigateToRegister = () =>{

    navigate("/Register");

}

 

  return <TodoTemplateBlock>

 <form style = {{display:'flex', flexDirection : 'column'}

 }

  onSubmit = {onSubmitHandler}

  >

  <label>Email</label>

  <input type = "email" value = {Email} onChange = {onEmailHandler}/>

  <label>Password</label>

  <input type = "Password" value = {Password} onChange = {onPasswordHandler}/>

 

  </form>

  <button style = {{margin : 20, padding : 3}}type = "submit" onClick = {navigateToTodo}> Login</button>

  <button style = {{margin : 20, padding : 3}}type = "submit" onClick = {navigateToRegister}> Register</button>

  </TodoTemplateBlock>;

}

export default TodoTemplate;

 

저번 시간에 만들었던 Login.js 파일입니다.

 

<button style = {{margin : 20, padding : 3}}type = "submit" onClick = {navigateToTodo}> Login</button>

<button style = {{margin : 20, padding : 3}}type = "submit" onClick = {navigateToRegister}> Register</button>

 

useNavigate를 이용해서 버튼에 onClick 이벤트시 로그인 버튼은 Todo페이지(메인 페이지)로 이동하고

 

Register 버튼을 누르면 Register페이지로 이동하게 만들었습니다.

 

물론 로그인 여부를 확인하고 인증이 되어야 넘어가는데

 

지금은 임의로 만든 것입니다.

 

import React, { useState } from 'react';

import styled from 'styled-components';

import { useNavigate } from 'react-router-dom';

const TodoTemplateBlock = styled.div`

  width: 512px;

  height: 768px;

  position: relative; /* 추후 박스 하단에 추가 버튼을 위치시키기 위한 설정 */

  background: white;

  border-radius: 16px;

  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);

  margin: 0 auto; /* 페이지 중앙에 나타나도록 설정 */

  align-items: center;

  justify-content: center;

  margin-top: 96px;

  margin-bottom: 32px;

  display: flex;

  flex-direction: column;

`;

const form = styled.div`

  display: flex;

  align-items: center;

  justify-content: center;

  color: #dee2e6;

  font-size: 24px;

  cursor: pointer;

  opacity: 0;

  &:hover {

    color: #ff6b6b;

  }

`;

function TodoTemplate() {

const navigate = useNavigate();

const[Email,setEmail] = useState("")

const[Password,setPassword] = useState("")

const[ConfirmPassword,setConfirmPassword] = useState("")

const onEmailHandler = (event) =>{

  setEmail(event.currentTarget.value)

}

const onPasswordHandler = (event) =>{

  setPassword(event.currentTarget.value)

}

const onConfirmPasswordHandler = (event) =>{

  setConfirmPassword(event.currentTarget.value)

}

const onSubmitHandler = (event) =>{

  event.preventDefalt();

}

const navigateToTodo = () =>{

    navigate("/todo");

}

const navigateToRegister = () =>{

    navigate("/Register");

}

const navigateLogin = ()=>{

  navigate("/");

}

  return <TodoTemplateBlock>

 <form style = {{display:'flex', flexDirection : 'column'}

 }

  onSubmit = {onSubmitHandler}

  >

  <label>Email</label>

  <input type = "email" value = {Email} onChange = {onEmailHandler}/>

  <label>Password</label>

  <input type = "Password" value = {Password} onChange = {onPasswordHandler}/>

  <label>ConfirmPasswordPassword</label>

  <input type = "Password" value = {ConfirmPassword} onChange = {onConfirmPasswordHandler}/>

  </form>

  <button style = {{margin : 20, padding : 3}}type = "submit" onClick = {navigateLogin}> Register</button>

  </TodoTemplateBlock>;

}

export default TodoTemplate;

 

Register.js 입니다.

 

회원가입이 완료되면 로그인 창으로 돌아가야하기 때문에

 

const navigateLogin = ()=>{

  navigate("/");

}

 

navigateLogin을 새로 만들어서 Login 창으로 돌아가게 하였습니다.

 

 

localhost:3000

 

지금은 로그인 창이 메인페이지 입니다. 

 

여기서 로그인 버튼을 누르면

 

localhost:3000/todo

 

투두리스트 웹 페이지가 나타납니다.

 

처음 화면에서 register 버튼을 누르면

 

localhost:3000/register

 

register 페이지로 이동합니다.

 

여기서 Register버튼을 누르면 다시 로그인 페이지로 이동합니다.

 

 

 

오늘은 라우팅 기능을 리마인드 하면서 추가해봤는데요.

 

로그인 기능을 구현하려면 데이터 베이스와 서버 부분을 공부해야 하는데

 

아예 다뤄보지 않은 부분이라 쉽게 손이 가진 않네요 ㅎ..

 

그래도 차근차근 해보려고 합니다.

 

감사합니다!