REACT
React에서 입력값의 유효성 검사와 에러 메시지 출력하기
gurwhddl
2023. 7. 4. 15:47
방법
- input을 전부 입력하고, form을 제출할 때
- 한번만 확인하면 되기 때문에 깔끔하지만, 제출하기 전까지는 유효한지 확인할 방법이 없음
- ref를 활용해서 onSubmit 이벤트가 발생했을 때만 ref.current.value 확인
- input을 입력하다 focus를 옮겼을 때 확인
- 입력 중간에 한번 확인할 수 있다는 점은 좋으나, 만약에 focus를 잃지 않고 제출할 경우에는 확인이 불가능
- onBlur를 이용해서 확인
- 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로 커버 가능)