React와 JS 프로젝트를 진행하면서 코드가 어떤 방식으로 진행되는지 궁금해서 서로 비교하는 것에 대해 분석해보았다.
프로젝트의 주제는 다르지만 공통적으로 이메일로 로그인하는 방식이기에 이메일 로그인 부분을 분석했다.
JS에서 이메일 로그인, React에서 이메일 로그인

공통점과 차이점

공통점을 먼저 살펴보자.
두 개의 파일을 살펴보면, 서버와의 통신을 'async/await'를 사용하여 비동기로 처리했다.
로그인 성공 시 사용자 정보를 로컬 스토리지에 저장하도록 코드를 작성했다.

차이점으로는 유효성 검사 방식이다.
JS에서는 ValidityState 속성을 사용해서 유효성 검사 기능을 사용한다. 사용된 것으로는 필수 원소에 값의 유무를 확인하는 valueMissing, email 혹은 url 입력 유형 검사에 실패한 경우 사용되는 typeMismatch가 있다.
React에서는 정규 표현식과 길이를 사용해서 간단한 형식 검사를 수행한다.

JS - 유효성 검사
inps.forEach(item => {
    item.addEventListener('keyup', () => {
        ...
        if (!email.validity.typeMismatch) {
            document.querySelector('.warning-msg-1').style.display = 'none';
            email.style.borderBottom = '1px solid #dbdbdb';
            if (document.activeElement == email) email.style.borderBottom = '1px solid #9747FF';
        };
        document.querySelector('.warning-msg-2').style.display = 'none';
        if (!email.validity.valueMissing && !pw.validity.valueMissing) {
            loginButton.disabled = false
        } else {
            loginButton.disabled = true
        }
    })
  ...
})

React - 유효성 검사
const inputHandler = (e) => {
    if (e.target.type === "email") {
      setUserEmail(e.target.value);
      if (validateEmail(e.target.value)) {
        setEmailWarning("");
      } else {
        setEmailWarning("올바른 이메일 형식이 아닙니다.");
      }
      setWarningMessage("");
    }
    if (e.target.type === "password") {
      setUserPassword(e.target.value);
      if (e.target.value.length < 6) {
        setPasswordWarning("비밀번호는 6자리 이상이어야 합니다.");
      } else {
        setPasswordWarning("");
      }
      setWarningMessage("");
    }
  };

  const validateEmail = (email) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

정규표현식과 제공된 속성

React에서는 정규표현식으로 유효성 검사를 진행하고 JS에서는 브라우저에서 제공된 속성을 활용해서 유효성 검사를 진행한다. 2가지 방법 모두 사용할 수 있지만 신뢰성이 다르다.
정규표현식으로 진행할 경우, 간단한 정규 표현식을 통해 유효성을 판단하는데 만약 작성된 표현식과 다른 이메일이 있는 경우 올바른 이메일이지만 유효성을 통과하지 못한다.
반면, 브라우저에서 제공된 속성을 활용할 경우 브라우저가 제공하는 표준에 따라 검사하기에 사용자 에이전트 간의 차이가 적다. 따라서 브라우저에서 제공된 속성을 활용하는 것이 더 신뢰성이 있을 수 있다.

하지만 typeMismatch와 같은 검사는 HTML의 유효성 검사에 기반한 브라우저 기능이다. React는 상태와 이벤트 핸들러를 통해 상호작용을 다루기 때문에 브라우저에서 제공하는 기능은 사용할 수 없다.

신뢰성은 JS에 사용된 것이 조금 더 있지만 각 언어에 따라 방법이 다르기 때문에 언어에 따른 각 방법을 학습할 필요가 있다고 생각한다.