[노드, 리액트 기초 | React] #24. 회원가입 페이지 구현

🫧 회원가입 페이지 구현

로그인 페이지에서 거의 다 해둔 내용을 회원가입 페이지에서는 조금만 바꾸어 사용하면 되기 때문에 뚝딱뚝딱 했다!

components/views/RegisterPage/RegisterPage.js

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { registerUser } from "../../../_actions/user_action";
import { useNavigate } from "react-router-dom";

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

  const [Email, setEmail] = useState("");
  const [Password, setPassword] = useState("");
  const [Name, setName] = 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,
    };

    dispatch(registerUser(body)).then((response) => {
      if (response.payload.success) {
        navigate("/login");
      } else {
        alert("Failed to sign up");
      }
    });
  };

  return (
    <div
      style={{ display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100vh" }}
      onSubmit={onSubmitHandler}
    >
      <form style={{ display: "flex", flexDirection: "column" }}>
        <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>회원가입</button>
      </form>
    </div>
  );
}

export default RegisterPage;

1. form tag를 이용해서 회원가입 할 때 정보들을 넣어줌

• email
• 이름
• password
• password 확인
• 확인 버튼

2. 안에서 데이터를 변화시키려고 할 때는 state를 활용해서 변화를 시켜줌

• email state 생성
• Name state 생성
• password state 생성
• confirm password state 생성
• 생성 후 state들을 각각 value에 넣어줌

3. 타이핑 할 때 onChange event 를 발생시켜 state를 변화시킴 (state가 변화되면 value 또한 변화)

• onEmailHandler function 생성
  - setEmail을 통해 event.currentTarget.value로 value를 바꾸어줌
• onNameHandler function 생성
  - setName을 통해 event.currentTarget.value로 value를 바꾸어줌
• onPasswordHandler funtion 생성
  - setPassword을 통해 event.currentTarget.value로 value를 바꾸어줌
• onConfirmPasswordHandler function 생성
  - setConfirmPassword을 통해 event.currentTarget.value로 value를 바꾸어줌
  • 비밀번호와 비밀번호 확인이 같은지 체크해주는 조건문을 추가하여 다를 시 alert을 return 해서 redux 진입을 막음

4. 회원가입 button을 클릭했을 때 onSubmit event가 일어날 수 있게 form에 onSubmit Handler 추가

• server에 보내고자 하는 값이 state가 갖고 있기 때문에 보내어줌
• redux를 사용하기 때문에 dispatch를 통해 action인 user_action의 registerUser 으로 보내어줌

5. response가 true일 경우에는 loginPage로 넘겨줌

_actions/types.js 수정

export const REGISTER_USER = "register_user";

type에 REGISTER_USER를 정의해준다.

_actions/user_actions.js 수정

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,
  };
}

기존의 login과 관련된 action 이후에 register과 관련된 action을 추가해준다. 로그인과 거의 동일하다.

1. registerUser function 생성

2. axios를 통해 request 진행

3. 서버에서 받은 data를 request 변수에 저장
   return을 시켜 reducer로 보냄

• type 이름은 REGISTER_USER

_reducers/user_reducers.js

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

const userReducer = (state = {}, action) => {
  switch (action.type) {
    case REGISTER_USER:
      return { ...state, register: action.payload };
    default:
      return state;
  }
};

export default userReducer;

1. REGISTER_USER case 추가
2. 다음 state를 return

• register에 해당 action의 payload를 넣어줌(node 서버의 값을 넣어줌)

MongoDB에 잘 회원가입이 되었는지 확인해보면 잘 추가되어있다!

➕ 참고

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 를 공부하며 작성한 글입니다.