React에서 입력값의 유효성 검사와 에러 메시지 출력하기

방법

1. input을 전부 입력하고, form을 제출할 때

• 한번만 확인하면 되기 때문에 깔끔하지만, 제출하기 전까지는 유효한지 확인할 방법이 없음
• ref를 활용해서 onSubmit 이벤트가 발생했을 때만 ref.current.value 확인

2. input을 입력하다 focus를 옮겼을 때 확인

• 입력 중간에 한번 확인할 수 있다는 점은 좋으나, 만약에 focus를 잃지 않고 제출할 경우에는 확인이 불가능
• onBlur를 이용해서 확인

3. input에 입력하는 순간마다 확인

• 유저가 입력하는 순간마다 확인할 수 있는 점은 좋으나, 불필요한 렌더링이 발생할 수도 있음
• useState로 설정한 변수를 input의 value로 지정하고, onChange 이벤트가 발생하면 setState를 통해 state를 계속 바꿔줌

이렇게 유효성을 검사했으면 유저에게 그에 대한 피드백을 어떻게 제공할지가 중요

• 1번을 사용하면서, 제출값이 유효하지 않으면 에러메세지 출력했다가 입력이 들어오면 숨기기

내가 선택한 방법은 처음에는 2번과 3번을 같이 사용하는 법

const reg = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
  const [inputValue, setInputValue] = useState("");
  const [isInputTocuhed, setIsInputTocuhed] = useState(false);
  const isValid = reg.test(inputValue);
  const onInputHandler = (e) => {
    setInputValue(e.target.value);
  };
  const onBlurHandler = (e) => {
    setIsInputTocuhed(true);
  };
  const onSubmitHandler = (e) => {
    e.preventDefault();
    setIsInputTocuhed(true);
    if(!isValid){return}
    setInputValue("");
  };
  const 메세지띄우냐 = !isValid && isInputTocuhed; //유효하지 않고, 입력창을 건든 이후에만 메세지 표시

• focus를 옮기기 전까지는 isInputTocuhed가 false이기 때문에 유효성과는 관계없이 에러 메세지를 출력 안함
• focus를 옮기거나 submit 했을 때부터는 isInputTocuhed가 true가 되기 때문에, input onChange로 isValid === true가 되기 전까지는 계속해서 에러메세지가 출력됨

예를 들어 이메일을 입력할 때
첫번째로 abc를 입력하던 한글을 입력하던 값에 관계없이 에러 메세지 출력 안함
input을 옮기거나 제출버튼을 누르면 - validity를 확인하고 에러 메세지를 출력
올바르게 입력하기 전까지 에러 메세지는 떠 있다가 - 유효성 검사를 통과하는 순간 메세지 사라짐

단점 - 코드가 너무 길어짐(hooks로 커버 가능)