boilerplate(client) - 로그인 기능 만들기(2)

따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다.

 

 

 

 

 

로그인 기능 구현하기

1. UI 만들기

src > components > views > LoginPage 폴더 안에 LoginPage.js를 생성한다.

이후 원하는 UI를 구현 후 return 시키면 된다.

 

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'}} 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

 

위의 구현 내용을 확인해보면 다음과 같다.

 

 

 

2. state 만들기

input 태그에 입력한 값을 받기 위해서는 useState이 필요하다.

useState을 통해 각 state을 생성하고 setState을 통해 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);
    }
    
    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

 

useState을 쉽게 사용하기 위해서는 VSCode의 확장프로그램인 ES7 React/Redux/GraphQL/React-Native snippets을 설치하면 된다.

 

 

 

3. dispatch 설정

dispatch를 통해 action을 전달한다.

서버로부터 받은 응답의 상태에 따라 로그인을 성공했다면 LandingPage로 보내는 작업을, 로그인에 실패했다면 실패했다는 안내 메세지를 출력한다.

 

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

function LoginPage(props) {
    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) { props.history.push('/'); }
                else alert("Login 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;

 

 

 

결과

서버 구현시 로그인에 성공하면 loginSuccess: true, 해당 user의 userId를 반환하도록 구현했다.

프로그램을 실행시킨 후 http://localhost:3000/login으로 들어가 email과 password를 입력한 후 login 버튼을 클릭했다.

로그인이 정상적으로 실행되자 LandingPage로 이동한 것을 확인할 수 있었고 이를 Redux DevTools로 살펴보았다.

 

action에 type과 서버로부터 받은 응답이 제대로 저장된 것을 볼 수 있었다.