이 예시에서는
키 입력에 따른 유효성 검증과 더불어
포커스 해제와 같은, 포커스 기반의 검증 방법을
결합시킨 유효성 검증을 몇 가지 추가해 보았습니다
적절한 사용자 경험을 제공한다고
생각이 됩니다만
유효성 검증을 추가하는 것에
이 방법만 있는 것은 아닙니다
StateLogin 버전이 아닌
참조(ref) 기반의 로그인 양식으로 돌아와서
사용자 입력의 유효성을 검증할
또다른 방법을 알아보도록 하겠습니다
먼저 Login.jsx 파일에서 로그인 양식을 가져오기 위해
앱 컴포넌트의 import를 수정하겠습니다
그리고 이 파일에서는 참조를 사용합니다
이번에는 참조를 사용하기 때문에
키 입력에 따른 유효성 검사가 사실상 어렵습니다
그러기 위해서는 별개의 이벤트 리스너를 설정해 주어야 하는데
만약 그렇게 한다면
상태를 통해 입력값을
관리해 주어야 하기 때문입니다
그렇기에 참조로만 진행을 하고 싶다면
사용자가 양식을 제출했을 때에만
검증을 진행하면 됩니다입력
이것은 논리적으로 타당할 뿐 아니라
꽤나 인기있는 전략이라고 할 수 있는데
사용자가 타이핑을 할 때마다 이를 검증하지 않아도 되기 때문입니다
그 대신 여기 Login 컴포넌트 함수의
handleSubmit 함수에서
이메일이 유효한지를 알아내면 되는데
이렇게 emailIsInvalid 상수를 추가함으로
양식이 제출되면
검사를 시작합니다
느낌표를 앞에 적어넣은
includes 메소드를 이용해서 해당 이메일에
@ 부호가 있는지를 확인해 주는 것입니다
여기 이 오류를 양식에 반영하고자
유효하지 않은 양식이 제출되면
UI의 업데이트가 필요해지기에
상태를 추가적으로 이용하면 됩니다
앞서 배웠던 부분이기도 합니다
useState 훅을 가져온 뒤
그것을 이용해 여기에서 상태 관리를 하면 되는데
양식 전체에 영향을 미치는
일반적인 오류 메시지를 보여주고자 할 때 사용하는
formIsInvalid 상태를 비롯해
emailIsInvalid 상태와
setEmailIsInvalid 등이 될 수 있습니다
원래 False일지라도 emailIsInvalid의 상태에 따라
업데이트를 해야 할 수도 있습니다
여기 보시면 emailIsInvalid가 중복으로 사용되어서
이름의 충돌이 생겼는데
이 상황을 간단히 해결하기 위해
이쪽의 이름을 emailIsValid로 변경해 주고
이 느낌표를 지워서
반대의 검사를 하도록 하겠습니다
그리고 여기에서 emailIsValid가 유효하지 않은지
다시 말해 무효인지를 체크합니다
그리고 이 경우, setEmailIsInvalid를 호출해서
이것을 True로 설정해서 상태 업데이트를 해 주겠습니다
또 여기에 있는 if문에 return을 넣어서
이 이후의 코드가 실행되지 않도록
조치해 두겠습니다
예를 들어, 입력된 데이터로 HTTP 요청을 보낸다라고 하면
유효하지 않은 데이터가 입력되었을 경우
그 과정이 진행되지 않도록 하기 위함입니다
여기에 return을 넣어주는 것으로
이 코드가 실행되지 않도록 하는 것입니다
이렇게 양식이 제출되면
입력값의 유효성을 검사하도록 했으니
유효하지 않은 데이터가 제출되었을 경우에만
업데이트되는 이 상태를 사용해서
여기에 오류 메시지를 보이도록 할 수도 있습니다
그것을 위해 여기에 다시 디브(div)를 추가하고
클래스 이름을 control-error로 입력하고
emailIsInvalid의 유효성 검사 결과에 따라서
'유효한 이메일 주소를 입력하십시오'와 같은 오류 메시지가 출력되도록 합니다
이제 다시 돌아가보면
이메일 입력란에 무엇을 하든 오류 알림이 보이지 않지만
로그인 버튼을 클릭하게 되면 오류 메시지가 나오게 됩니다
이 오류 메시지는
유효한 이메일 주소가 입력되고
양식이 다시 제출될 때까지 사라지지 않습니다
지금도 여전히 없어지지 않고 있기는 하지만
여기 콘솔 로그를 보시면
입력한 내용이 if 검사를 통과했고
이메일 주소 또한 유효하다는 것을 확인할 수 있습니다
이 상황에서 UI를 업데이트하고 싶다면
setEmailIsInvalid를 False로 설정해 주되
여기 위에 있는 검사를 통과하고
이메일이 유효하다는 것을 알게 된 이후 설정해 주면 됩니다
이렇게 해두면, 유효한 양식이 제출되었을 때
여기에 있던 오류 메시지는 사라집니다
이것이 양식이 제출되었을 때
제공된 값이 유효한지를 검사하는 방법입니다
사용하는 여러 가지의 접근법이라던가
제공하고자 하는 사용자 경험은
결국 여러분의 선택에 따라 결정됩니다
제출에 따른 유효성 검사는
키입력과 입력 요소의 포커스 상태 검증을 결합한 방식에 비해
확실히 다소 적은 코드가 사용되긴 합니다
반면
키 입력과 포커스를 기반으로 한 접근법을 사용한다면
사용자에게 보다 직접적인 피드백을 제공할 수 있습니다
그러한 것과는 별개로, 제출에 따른 검증 방식 또한
전혀 문제없이 사용할 수 있고
여러분이 원하는 사용자 경험을 제공하는 방향일 수도 있습니다
또 하나 새겨둘 부분은
이미 키 입력과 블러를 이용한 유효성 검사를 하고 있더라도
제출 기반의 검증을 추가하는 경우가 생길 수도 있다는 것입니다
그렇게 하지 않을 경우를
잠시 이 StateLogin 양식으로 돌아와서 살펴보겠습니다
지금 저는 키 입력과 입력 블러링을 통해
유효성 검사를 진행하고 있는데
이 유효성 검사를 의지하더라도 사용자는
입력값과의 상호 작용으로 좋은 사용자 경험을 얻을 수 있습니다
그렇지만 만에 하나
사용자가 제출 버튼을 그냥 클릭하게 되면
여기 콘솔에서 볼 수 있듯이
여기 handleSubmit 내에서 유효하지 않은 데이터가 핸들링 됩니다
만약 사용자가 여러분의 의도를 무시하고
유효하지 않은 양식을 제출하게 되면 문제가 생길 수 있기 때문에
여기 handleSubmit 함수에도
유효성 검사를 추가해 두는 것이 좋습니다
이미 Login.jsx 파일에서 보여드린 부분이기 때문에
여러분의 시간 절약을 위해 여기에서는 생략하겠습니다만
여기는 해당 파일로 다시 바꾸어 놓겠습니다
아무튼 여러분이 기억해 두셔야 할 것은
이미 키 입력 기반의 방식으로
사용자 입력의 검증을 하고 있더라도
제출 기반의 유효성 검사를 추가하는 것이
좋다는 것입니다
다음 강의에서는 양식 제출 시 입력 검증을
보다 쉽게 할 수 있는 방법을 보여 드리도록 하겠습니다