씨네
공부하는 개발자 강씨네
씨네
  • 분류 전체보기 (460)
    • Web (21)
      • HTML (11)
      • CSS (10)
    • JS 관련 (49)
      • JavaScript (27)
      • JQuery (22)
    • TS 관련 (15)
      • TypeScript (15)
    • NodeJS (7)
      • NodeJS (7)
    • 따라하며 배우는 시리즈 (23)
      • NodeJS & ReactJS Basic (23)
      • NodeJS & ReactJS Movie (0)
      • NodeJS & ReactJS Youtube (0)
      • NodeJS & ReactJS ChatBot (0)
    • SPA (14)
      • React (14)
      • Vue (0)
      • Anguler (0)
    • Java 관련 (118)
      • Java (52)
      • JDBC (6)
      • JSP & Servlet (18)
      • Spring Legecy (38)
      • SpringBoot (4)
    • Python (26)
      • Python (20)
      • PyMongo (1)
      • Django (5)
    • Git (24)
      • Github (24)
    • RDB (22)
      • Oracle (21)
      • MySQL (1)
    • NoSQL (5)
      • MongoDB (5)
    • OS (4)
      • Linux (4)
    • 빅데이터 (2)
      • hadoop (2)
    • IDE (20)
      • eclipse (11)
      • VSCODE (4)
      • VisualStudio (1)
      • IntelliJ (1)
      • PyCharm (1)
      • DBeaver (2)
    • Install (3)
      • Tomcat (1)
      • Docker (1)
      • Anaconda (1)
    • 오류&에러 (28)
      • TS (2)
      • NodeJS (7)
      • SQL (8)
      • Java (1)
      • Spring (4)
      • Git (6)
      • 기타 (0)
    • 알고리즘 (67)
      • 수열 (1)
      • 백준(backjoon) (39)
      • Programmers (27)
    • 자격증 (5)
      • SQLD (5)
    • 기타 (2)
    • IT유튜브로 지식쌓기 (2)

공지사항

인기 글

최근 글

티스토리

250x250
hELLO · Designed By 정상우.
씨네

공부하는 개발자 강씨네

[ReactJS] 회원가입 페이지 구현하기
따라하며 배우는 시리즈/NodeJS & ReactJS Basic

[ReactJS] 회원가입 페이지 구현하기

2022. 9. 19. 08:32
728x90

앞서 로그인 페이지를 구현했던것과 비슷하게 최소한의 정보만 회원가입란에 입력하는 회원가임 페이지를 만들어 보겠습니다.

로그인 기능이 구현되었다면 회원가입은 간단합니다. (복붙하면 되거든요)

 

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

function RegisterPage(props) {

    const dispatch = useDispatch();

    const [Email, setEmail] = useState("");
    const [Name, setName] = useState("");
    const [Password, setPassword] = useState("");
    const [ConfirmPassword, setConfirmPassword] = useState("");

    const onEmailHandler = (event) => {
        setEmail(event.currentTarget.value);
    }
    const onNameHandler = (event) => {
        setName(event.currentTarget.value);
    }
    const onPasswordHandler = (event) => {
        setPassword(event.currentTarget.value);
    }
    const onConfirmPasswordHandler = (event) => {
        setConfirmPassword(event.currentTarget.value);
    }
    const onSubmitHandler = (event) => {
        event.preventDefault();

        if(Password !== ConfirmPassword){
            return alert('비밀번호와 비밀번호 확인이 같지 않습니다.')
        }

        let body = {
            email: Email,
            name: Name,
            password: Password,
            confirmPassword: ConfirmPassword,
        }

        dispatch(registerUser(body))
        .then(response => {
            if(response.payload.success){
                props.history.push('/loginPage')
            } 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>Name</label>
                <input type='text' value={Name} onChange={onNameHandler}/>
                <label>Password</label>
                <input type='password' value={Password} onChange={onPasswordHandler}/>
                <label>Confirm Password</label>
                <input type='password' value={ConfirmPassword} onChange={onConfirmPasswordHandler}/>
                <br />
                <button formAction=''>
                    회원가입
                </button>
            </form>
        </div>
    )
}

export default RegisterPage;

RegisterPage.js파일입니다.

LoginPage.js파일과 99%동일할데 비밀번호화 비밀번호 체크가 같은지 유효성검사를 하는 부분만 추가되었습니다.

 

 

 

import axios from 'axios';
import {
    LOGIN_USER,
    REGISTER_USER,
} from './types';

export function loginUser(dataToSubmit) {

    const request = axios.post('/api/users/login', dataToSubmit)
        .then(response => response.data)

    return {
        type: LOGIN_USER,
        payload: request
    }
}

export function registerUser(dataToSubmit) {

    const request = axios.post('/api/users/register', dataToSubmit)
        .then(response => response.data)

    return {
        type: REGISTER_USER,
        payload: request
    }
}

user_action.js파일입니다.

로그인부분과 똑같습니다.

 

export const LOGIN_USER = "login_user";
export const REGISTER_USER = "register_user";

types.js

 

import { 
    LOGIN_USER,
    REGISTER_USER,
} from '../_actions/types'

export default function (state = {}, action) {
    switch(action.tpye) {
        case LOGIN_USER:
            return { ...state, loginSuccess: action.payload }
            break;
        case REGISTER_USER:
            return { ...state, register: action.payload}
            break;
        default:
            return state;
    }
}

user_reducer.js 파일도 로그인과 동일하게 회원가입에 대한 부분만 추가해주면됩니다!

 

페이지가 잘 로드가 되네요!

이제 회원가입을 해보겠습니다.

 

회원가입이 성공하고 로그인페이지로 잘 이동합니다!!

728x90
저작자표시 (새창열림)

'따라하며 배우는 시리즈 > NodeJS & ReactJS Basic' 카테고리의 다른 글

[ReactJS] 인증 체크하는 기능 구현하기  (0) 2022.09.21
[ReactJS] 로그아웃 기능 구현하기  (0) 2022.09.20
[ReactJS] 로그인 페이지 구현하기  (0) 2022.09.18
[ReactJS] class Component & functional Component  (0) 2022.09.17
[ReactJS] Redux 기초, Redux 설정  (1) 2022.09.16
    '따라하며 배우는 시리즈/NodeJS & ReactJS Basic' 카테고리의 다른 글
    • [ReactJS] 인증 체크하는 기능 구현하기
    • [ReactJS] 로그아웃 기능 구현하기
    • [ReactJS] 로그인 페이지 구현하기
    • [ReactJS] class Component & functional Component
    씨네
    씨네
    개발자 씨네가 공부하는 내용을 기록 겸 공유하는 블로그입니다!

    티스토리툴바