배민문방구 회원가입창은 input에 해당 값을 입력하였을 시 밑에 경고문이 출력되도록 유효성 검사를 실시힌다.
클론코딩을 하면서 이 기능을 꼭 따라해보고 싶었다. 따라서 input에 해당값을 입력하고 tab을 쳤을 때 경고문이 출력되도록 onBlur, onFocus 이벤트를 활용하였다.

Event

OnBlur

• onBlur은 이벤트가 target하고 있는 곳에 focus가 out됬을 때 작동하는 이벤트이다.
• onFocus와 정확히 반대되는 행동을 한다고 볼 수 있다.

OnFocus

• OnFocus는 이벤트가 target하고 있는 곳에 focus가 on되면 작동하는 이벤트이다.
• 예를 들면 input을 target한다고 했을 때 input에 커서 즉 focus가 on되면 작동한다.

프로젝트 적용

유효성 검사

import React, { useState } from 'react';
import './SignUpInput.scss';
import BASE_URL from '../Config';

function SignUpInput({
  type,
  onChange,
  value,
  text,
  placeholder,
  name,
  backname,
  isError,
  validErrorMessage,
  isDuplicate,
  setIsDuplicate,
  duplicateErrorMessage,
  mandatoryMessage,
  clearMessage,
}) {
  const [isBlur, setIsBlur] = useState(false);

  const signUpInputFetch = () => {
    fetch(`${BASE_URL}users/check-${backname}`, {
      method: 'POST',
      body: JSON.stringify({
        [backname]: value,
      }),
    })
      .then(res => res.json())
      .then(res => {
        if (res.message === 'ALREADY EXISTS') {
          setIsDuplicate(prev => ({ ...prev, [name]: true }));
        }
      });
  };

  const onBlur = () => {
    setIsBlur(true);
    signUpInputFetch();
  };

  const onFocus = () => {
    setIsBlur(false);
    setIsDuplicate(prev => ({ ...prev, [name]: false }));
  };

  return (
    <div className="signUpInput">
      <div className="inputTextBox">
        <p className="inputText">{`* ${text}`}</p>
      </div>
      <div className="inputWrapper">
        <input
          className="input"
          name={name}
          onChange={onChange}
          type={type}
          placeholder={placeholder}
          value={value}
          onBlur={onBlur}
          onFocus={onFocus}
        />
        {isError && isBlur ? (
          <div className="warningShowUp valid">{validErrorMessage}</div>
        ) : isDuplicate[name] && value !== '' && isBlur ? (
          <div className="warningShowUp duplicate">{duplicateErrorMessage}</div>
        ) : value === '' && isBlur ? (
          <div className="warningShowUp mandatory">{mandatoryMessage}</div>
        ) : !isError && !isDuplicate[name] && value !== '' && isBlur ? (
          <div className="clear">{clearMessage}</div>
        ) : null}
      </div>
    </div>
  );
}

export default SignUpInput;

• 부모 컴포넌트에 만들어놓은 isDuplicate state가 true가 되면 중복값이 서버에 있다는 의미를 가진 signUpInputFetch 함수를 통해 경고문을 렌더링한다. 만약에 중복값이 없다면 isDuplicate state은 false이다.

• OnBlur함수는 input의 onBlur이벤트에 해당하는 함수로 input의 커서(focus)가 out되는 순간 isBlur state을 true로 만들고 signUpInputFetch 함수를 실행시킨다.

• 반면 OnFocus함수는 isBlur state을 false로 만들고 input에 해당하면 경고문을 초기화시키기 위해 isDuplicate state을 false로 만든다.

영상