회원가입 컴포넌트 기능 구현하기

미리보기

 

 

회원가입 기능 구현

로그인 기능을 구현하기 전에 회원가입 기능을 먼저 구현하겠습니다.

소스코드

 

import { useState } from "react";
import "./Signup.css";
import { useNavigate } from "react-router-dom";

const Signup = () => {
  const nav = useNavigate();
  
  // 상태 확인 변수
  const [formData, setFormData] = useState({
    id: "",
    password: "",
    password_confirm: "",
  });

  // 이벤트 변화 확인 함수
  const onChangeForm = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  // 폼 데이터 전송 함수
  const onSubmitForm = (e) => {
    e.preventDefault();

    const { id, password, password_confirm } = formData;
    if (!id) {
      alert("아이디를 입력해주세요");
      return;
    }
    if (!password) {
      alert("비밀번호를 입력해주세요");
      return;
    }
    if (!password_confirm) {
      alert("비밀번호 확인을 입력해주세요");
      return;
    }

    if (password !== password_confirm) {
      alert("입력한 비밀번호가 같지 않습니다.");
      return;
    }

    sessionStorage.setItem("user", JSON.stringify(formData));
    alert("회원가입 성공하였습니다!");
    nav("/login");
  };

  return (
    <div className="Signup">
      <form className="signup_form" onSubmit={onSubmitForm}>
        <h4>회원가입</h4>
        <input
          type="text"
          name="id"
          placeholder="아이디"
          onChange={onChangeForm}
        />
        <input
          type="password"
          name="password"
          placeholder="비밀번호"
          onChange={onChangeForm}
        />
        <input
          type="password"
          name="password_confirm"
          placeholder="비밀번호 확인"
          onChange={onChangeForm}
        />
        <button type="submit">회원가입</button>
        <button
          type="button"
          onClick={() => {
            nav(-1);
          }}
        >
          뒤로가기
        </button>
      </form>
    </div>
  );
};

export default Signup;

name 속성 지정

먼저 input 필드에 name 속성으로 각각 id, password, password_confirm 을 지정해 줍니다.

input 필드에 name 속성을 지정한 이유는 이벤트 변화 확인 함수에서 어떤 input 필드가 변했는지 확인하기 위해서 입니다.

리액트 상태 변수 추가

리액트의 useState 함수를 사용해 id, password 등의 내용을 가진 객체를 formData의 저장해줍니다.

 

onChangeForm 함수 구현

이벤트 변화 확인 함수인 onChangeForm 함수를 보면 매개변수로 e를 받고 있습니다.

여기서 e는 event의 e 로 발생한 이벤트가 전달되게 됩니다.

 

구조분해 할당으로 e.target 객체에서 name,value 속성을 값으로 받게해줍니다.

그리고 리액트의 상태 변화 함수로 기존 formData의 내용을 스프레드 문법으로 전달하고 발생한 이벤트의 name을 키, 값으로는 value 를 줘 formData가 수정되도록 해줍니다.

 

여기서 formData를 스프레드 문법으로 펼쳐준 이유는 기존 formData객체의 내용은 유지하면서 이벤트로 받은 input 필드의 name의 값만 변경되도록 하기 위해서입니다.

 

각각의 input 필드마다 onChange 값으로 onChangeForm함수를 넣습니다.

onSubmitForm 함수

onSubmitForm 함수에서는 type이 submit인 button이 클릭됬을 때 전송된 폼 데이터를 처리하기 위한 기능을 구현해줍니다.

 

onChangeForm 함수와 마찬가지로 e를 매개변수로 받아줍니다.

e.preventDefault() 함수를 사용하여  submit버튼을 눌렀을 때의 기본 이벤트(폼 전송, 새로고침)를 취소하도록 만들어줍니다.

 

다음으로 리액트의 상태 변수인 formData에서 id,password,password_confirm 값을 가져와줍니다.

가져온 id, password, password_confirm값이 없고 password와 password_confirm이 다르다면 alert창을 띄어 알림 메시지를 내보내도록 예외처리를 해줍니다.

 

예외처리 없이 정상적으로 진행되었다면 sessionStorage에 값을 저장하기 전에 formData를 JSON.stringfy() 함수를 사용하여 문자열로 변환해 저장하도록 만들어야 합니다.

 

sessionStorage는 객체 형식의 값을 문자열 변환 없이 담게 되면 [object Object] 형태로 값이 담기게 되기 때문에 반드시 문자열 변환을 해야 원하는 값으로 가져올 수 있습니다.

 

저는 sessionStorage의 setItem() 메서드를 호출하여 "user" 키에 formData 객체를 문자열로 변환한 값을 저장해 두도록 했습니다.

 

저장까지 성공하였다면 alert() 메서드를 호출하여 회원가입이 성공했다는 메시지를 화면에 띄어줍니다.

회원가입 성공했다면 더 이상 회원가입 페이지에 남아있을 필요가 없으므로 저번에 설치한 react-router-dom 라이브러리에서 useNavigate 훅을 가져와 nav 라는 변수에 할당해주고 nav('/login')값을 주어 로그인 페이지로 이동하도록 해줍니다.

 

마찬가지로 뒤로가기 버튼도 있으므로 뒤로가기 버튼이 클릭되었을 때 작동되도록 onClick의 새로운 함수를 하나 선언해 nav(-1)값을 주어 뒤로가도록 해줍니다.