⭐프로젝트 1 - React Hooks, 로그인 페이지

📕React Hooks

리액트 컴포넌트에는 두가지가 있다

클래스 컴포넌트와 펑셔널 컴포넌트가 있다

둘의 차이점은 아래와 같다

Class Component

클래스 컴포넌트는 많은 양의 기능을 제공한다

그렇기에 코드가 길고, 복잡하다

그리고 속도가 느리다

Functional Component

펑셔널 컴포넌트는 적은 양의 기능을 제공한다

그렇기에 코드가 짧고, 간단하다

그리고 속도가 빠르다

그래서 우리가 대체로 클래스 컴포넌트를 많이 사용했었다

그러나 리액트에서 훅이라는 것을 업데이트 했다

그로 인해 펑셔널 컴포넌트에서도 클래스 컴포넌트에서 사용하는 기능들을

사용할 수 있게 되었다

그래서 펑셔널 컴포넌트를 이용해서 구현하도록 하겠다

📘로그인 페이지

우선 지금 현재 웹을 열어보면 랜딩페이지가 바로 나온다

현재 버튼을 눌러서 페이지가 이동되도록 구현해 놓은것이 없기 때문에

사이트 주소를 수동으로 /login을 붙여서 이동해보자

이렇게 로그인 페이지에 들어오면 이메일, 비밀번호, 로그인 버튼이 나오도록 만들자

입력 양식들을 가운데에 두기위해 CSS를 추가해야 되는데 나도 아직 CSS를 제대로

몰라서 코드만 가져왔고 CSS는 나중에 다시 공부하자

LoginPage.js 들어가면 div 태그 사이에 입력 양식을 추가해야 한다

div 태그 옆에 스타일을 주도록 하자

<div style={{display: 'flex', justifyContent: 'center', alignItems: 'center',
    width: '100%', height: '100vh'}}>
      LoginPage
    </div>

이렇게 작성하면 된다

이후 입력 양식들을 넣도록 하자

import React from 'react'

function LoginPage() {
  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <form style={{ display: 'flex', flexDirection: 'column'}}>
        <label>Email</label>
        <input type="email" value onChange />
        <label>Password</label>
        <input type="password" value onChange />

        <br />
        <button>
          Login
        </button>
      </form>
    </div>
  )
}

export default LoginPage

이렇게 LoginPage.js를 수정하고 사이트에 들어가면 아래처럼 나올 것이다

그러나 무언가를 치려고 하면 변화가 없을 것이다

value onChange에 무언가를 해주어야 하는데 우리가 지난 Redux에서

페이지 내에서 변화가 일어나면 state로 변화를 시킨다고 했었다

그래서 value에 state를 넣어주어야 한다

Email을 위한 state와 Password를 위한 state 총 2개를 만들어야 한다

const  [state, setstate] = useState(initalState)

이게 state를 만드는 코드이고 const옆에 state라고 적힌 부분을 바꿔주면 된다

그리고 뒤에 있는 이니셜스테이트는 처음에 어떻게 보여주는가 라고 생각하면 되는데

우리는 빈칸으로 변경하면 된다

import React, { useState } from 'react'

function LoginPage() {

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

  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <form style={{ display: 'flex', flexDirection: 'column'}}>
        <label>Email</label>
        <input type="email" value={Email} onChange />
        <label>Password</label>
        <input type="password" value={Password} onChange />

        <br />
        <button>
          Login
        </button> 
      </form>
    </div>
  )
}

export default LoginPage

이렇게 코드를 변경하여도 아직 타이핑이 되지 않는다

타이핑을 하면 onChange라는 이벤트를 발생시켜서 state를 바꿔주고 그럼

인풋 태그 안의 value가 바뀌는 로직이다

그래서 onChange에 이벤트리스너가 필요하다

import React, { useState } from 'react'

function LoginPage() {

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

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

  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <form style={{ display: 'flex', flexDirection: 'column'}}>
        <label>Email</label>
        <input type="email" value={Email} onChange={onEmailHandler} />
        <label>Password</label>
        <input type="password" value={Password} onChange={onPasswordHandler} />

        <br />
        <button>
          Login
        </button> 
      </form>
    </div>
  )
}

export default LoginPage

이렇게 핸들러를 만들어 주고 저장을 한 뒤 입력을 하면 타이핑이 되는것을 볼 수 있다

이제는 로그인 버튼을 누르면 데이터가 이동하도록 만들어보자

우선 버튼을 누르면 무언가가 되도록 하기 위해 버튼에 submit 타입을 주고

form 태그에 onSubmit 를 만들고 위처럼 이벤트 핸들러를 만들어 주자

그리고 간단하게 현재 state에 무엇이 들어있나 콘솔에 찍도록 만들어보자

import React, { useState } from 'react'

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 onSubmitHandler = (event) => {
    event.preventDefault();
    console.log(Email)
    console.log(Password)
  }

  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <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} />

        <br />
        <button type="submit">
          Login
        </button> 
      </form>
    </div>
  )
}

export default LoginPage

이렇게 작성하고 버튼을 누르면 아래처럼 나오는 것을 볼 수 있다

우리가 저번에 데이터를 주고 받을 때 Axios를 사용한다고 했었다

데이터를 보내기 위해 Email과 Password를 객체로 만들자

이후 Axios.post를 이용해서 서버의 index.js에 만들어 놓은 로그인 api주소로

데이터를 넣어서 보내는 것이다

import { response } from 'express'
import React, { useState } from 'react'

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 onSubmitHandler = (event) => {
    event.preventDefault();
    
    let body = {
      email: Email,
      password: Password
    }

    Axios.post('/api/users/login', body)
    .then(response)
  }

  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <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} />

        <br />
        <button type="submit">
          Login
        </button> 
      </form>
    </div>
  )
}

export default LoginPage

서버의 index.js 파일에서 우리가 만든 api들을 보면 로그인이 들어오면

DB에서 유저를 찾고 있으면 토큰을 생성해서 쿠키에 보내주고 추가적인 정보들이

리턴이 되는데 그것을 response로 받아서 우리가 추가적인 처리를 해주어야 한다

여기서 리덕스를 사용하는 것이다

리덕스를 사용하는 부분은 아무리 써도 말로 표현하기가 어려워서 링크로 대체하겠다

위 영상을 보고 천천히 따라한 후 로그인을 해보았다

이렇게 제대로 로그인이 된 모습을 볼 수 있다

그리고 유튜브 영상 마지막에 보면 랜딩 페이지로 넘어가는 부분이 있는데

유튜브 영상처럼 하면 push 관련 에러가 뜬다

import { useNavigate } from 'react-router-dom'
const navigate = useNavigate()
navigate('/')

이 3가지를 이용하면 랜딩페이지로 넘어갈 수 있다

코드 전문은 아래에 넣도록 하겠다

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { loginUser } from '../../../_actions/user_action'


function LoginPage(props) {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const  [Email, setEmail] = useState("")
  const  [Password, setPassword] = useState("")

  const onEmailHandler = (event) => {
    setEmail(event.currentTarget.value)
  }
  const onPasswordHandler = (event) => {
    setPassword(event.currentTarget.value)
  }
  const onSubmitHandler = (event) => {
    event.preventDefault();
    
    let body = {
      email: Email,
      password: Password
    }

    dispatch(loginUser(body))
      .then(response => {
        if (response.payload.loginSuccess) {
          navigate('/')
        } else {
          alert('Error')
        }
    })
  }

  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <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} />

        <br />
        <button type="submit">
          Login
        </button> 
      </form>
    </div>
  )
}

export default LoginPage