#31 회원 가입 페이지

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다.

 

 

1. RegisterPage.js 파일에 회원가입 폼 추가

import React, { useState } from "react";

export default function RegisterPage() {
	const [registerInfo, setRegisterInfo] = useState({
		email: "",
		name: "",
		password: "",
		confirmPassword: "",
	});


	const onChangeHandler = (e) => {
		setRegisterInfo((registerInfo) => ({
			...registerInfo,
			[e.target.name]: e.target.value,
		}));
	};

	const onSubmitHandler = (e) => {
		e.preventDefault();

		const body = {
			email: registerInfo.email,
			name: registerInfo.name,
			password: registerInfo.password,
			confirmPassword: registerInfo.confirmPassword,
		};
	};

	return (
		<div
			style={{
				display: "flex",
				justifyContent: "center",
				alignItems: "center",
				width: "100%",
				height: "100vh",
			}}
		>
			<form
				onSubmit={onSubmitHandler}
				style={{
					display: "flex",
					flexDirection: "column",
					justifyContent: "center",
					alignItems: "flex-start",
				}}
			>
				<label htmlFor="email">email</label>
				<input
					type="email"
					name="email"
					id="email"
					value={registerInfo.email}
					onChange={onChangeHandler}
				/>
				<label htmlFor="text">name</label>
				<input
					type="name"
					name="name"
					id="name"
					value={registerInfo.name}
					onChange={onChangeHandler}
				/>
				<label htmlFor="password">password</label>
				<input
					type="password"
					name="password"
					id="password"
					value={registerInfo.password}
					onChange={onChangeHandler}
				/>
				<label htmlFor="confirmPassword">confirmPassword</label>
				<input
					type="password"
					name="confirmPassword"
					id="confirmPassword"
					value={registerInfo.confirmPassword}
					onChange={onChangeHandler}
				/>

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

 

 

2. _actions/user_action.js 파일에 regiserUser 추가

import { LOGIN_USER, REGISTER_USER } from "./types";

export function registerUser(dataToSubmit) {
	const request = axios
		.post("/api/users/register", dataToSubmit)
		.then((response) => response.data);

	return {
		type: REGISTER_USER,
		payload: request,
	};
}

 

3. types.js에 REGISTER_USER 타입 추가

export const REGISTER_USER = "register_user";

 

4. user_reducer.js파일에 case 추가하기

import { LOGIN_USER, REGISTER_USER } from "../_actions/types";

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

		case REGISTER_USER:
			return { ...state, register: action.payload };

		default:
			return state;
	}
}

 

5. RegisterPage.js에 dispatch 적용

import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";

import { registerUser } from "../../../_actions/user_action";

export default function RegisterPage() {
	const dispatch = useDispatch();
	const navigate = useNavigate();


	const onSubmitHandler = (e) => {
			e.preventDefault();
	
			const body = {
				email: registerInfo.email,
				name: registerInfo.name,
				password: registerInfo.password,
				confirmPassword: registerInfo.confirmPassword,
			};

			dispatch(registerUser(body)).then((response) => {
				if (response.payload.success) {
					navigate("/LoginPage");
				} else {
					alert("error");
				}
			});
		};
		
...
}