[validation]자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (4)

안녕하세요 바로 이어서 4번째 기능 validation 입니다.

 

프론트단에서 form data를 입력할때 정규 표현식을 이용하여 validation을 진행하는데요

 

이부분을 리액트로 마이그레이션 해보겠습니다.

 

먼저 첫번째 글 링크입니다.

https://rhgustmfrh.tistory.com/92

자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (1)

 

 

import React, { useState } from "react";
import "../assets/css/login.css";
import { useRecoilState } from "recoil";
import {
  usernameState,
  useridState,
  userpassState
} from "../recoil/atoms/validation";

const Join: React.FC = () => {
  const [username, setUsername] = useRecoilState(usernameState);
  const [userid, setUserid] = useRecoilState(useridState);
  const [userpass, setUserpass] = useRecoilState(userpassState);

  const [messageName, setMessageName] = useState("");
  const [messageId, setMessageId] = useState("");
  const [messagePass, setMessagePass] = useState("");

  let idCheck = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,12}$/;
  let passCheck = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/;
  let nameCheck = /^[ㄱ-힣]{2,4}$/;

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    let checkComplete1 = nameCheck.test(username);
    let checkComplete3 = idCheck.test(userid);
    let checkComplete4 = passCheck.test(userpass);

    if (checkComplete1) {
      setMessageName("이름을 형식에 맞게 입력하였습니다.");
      // No need to set color in state. We can handle it in JSX.
    } else {
      setMessageName("이름은 한글로만 입력해주세요 (2~4자)");
      // No need to set color in state. We can handle it in JSX.
    }

    if (checkComplete3) {
      setMessageId("아이디를 형식에 맞게 입력하였습니다.");
      // No need to set color in state. We can handle it in JSX.
    } else {
      setMessageId(
        "아이디는 영문 숫자 조합 6자리 이상 12자리 이하만 가능합니다."
      );
      // No need to set color in state. We can handle it in JSX.
    }

    if (checkComplete4) {
      setMessagePass("비밀번호를 형식에 맞게 입력하였습니다.");
      // No need to set color in state. We can handle it in JSX.
    } else {
      setMessagePass(
        "비밀번호는 영문 숫자 특수기호 조합 8자리 이상 25자리 이하만 가능합니다."
      );
      // No need to set color in state. We can handle it in JSX.
    }

    if (checkComplete1 && checkComplete3 && checkComplete4) {
      alert("Form submitted");
      /* In real scenario you would want to do something else here */
    } else {
      alert("제대로 다시 입력해 주세요");
    }
  }
  return (
    <>
      <div className="loginWrap">
        <div className="center">
          <div className="formWrap">
            <h3 className="regi_title">회원으로 참여해주세요</h3>
            <div className="pathWrap">
              <a href="/login">로그인</a>
              <a className="on" href="/join">
                회원가입
              </a>
            </div>
            <form id="join_form" action="/addjoin" method="post">
              <input
                id="username"
                type="text"
                name="username"
                placeholder="Name"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              ></input>
              <p className="message">{messageName}</p>
              <input
                id="userid"
                type="text"
                name="userid"
                placeholder="ID"
                value={userid}
                onChange={(e) => setUserid(e.target.value)}
              ></input>
              <p className="message">{messageId}</p>
              <input
                id="userpass"
                type="password"
                name="userpass"
                placeholder="Password"
                value={userpass}
                onChange={(e) => setUserpass(e.target.value)}
              ></input>
              <p className="message">{messagePass}</p>
              <button id="submitBtn" type="submit" onClick={handleSubmit}>
                회원가입
              </button>
            </form>
            <p className="path_login">
              이미 회원이신가요? <a href="/login">로그인은 여기로</a>
            </p>
            <a className="path_home" href="/">
              HOME
            </a>
          </div>
          <div className="left_imgWrap">
            <img
              src={process.env.PUBLIC_URL + "/img/login.jpg"}
              alt="회원가입 이미지입니다."
            ></img>
          </div>
        </div>
      </div>
    </>
  );
};

export default Join;

import { atom } from "recoil";

export const usernameState = atom({
  key: "username",
  default: ""
});

export const useridState = atom({
  key: "userid",
  default: ""
});

export const userpassState = atom({
  key: "userpass",
  default: ""
});

생각보다 간단합니다.

 

아이디, 유저네임, 패스워드에 정규표현식을 사용하여 validation 한다음 useState로 메시지를 관리 해주면 됩니다.

 

해당 기능을 이용한 회원가입 페이지입니다.

 

이제 저 유저정보를 바탕으로 백엔드 api와 연결해 볼 수 있겠죠.

 

다음 시간에 계속 해보겠습니다.

 

감사합니다.