양식을 제출했을 때
어떻게 데이터 추출을 하는지 잘 알게 되었으니
양식과 입력의 유효성 검증에 대해 알아보겠습니다
입력 검증에는
이 섹션에서 앞서 언급했듯이
몇 가지 다른 방법이 존재합니다
예를 들어 사용자가 입력창에 무언가 써넣기 위해
타자를 칠 때마다 검증이 진행되도록 할 수도 있는데
이것이 어떻게 작동되는지 보여드리기 위해
여기 상태를 사용하는 Login 양식인
StateLogin 폼으로 돌아가 보겠습니다
매 키 입력에 반응해서
해당 값을 검증하기 위해서는
입력값이 어떻게 변하는지를
들어 줘야 하고
그것이 우리가 상태와 handleInputChange 함수를 사용하며
하고 있는 일입니다
데이터 추출을 위해 참조를 사용하거나
빌트인 FormData 방식을 사용할 때
우리는 매 키 입력이 아닌
양식이 제출된 이후에나 데이터를 얻게 됩니다
그러므로 키 입력마다 진행되는 검증을 위해서는
여기 상태 기반의 접근법이 필요합니다
그러므로 앱 파일(App.jsx)로 가서
Signup 양식의 import 내용을 지우고
대신 components 폴더의
StateLogin.jsx 로부터
다시 Login 양식을 가져옵니다
이 로그인 양식의 상태 기반 버전을
가져오기 위함입니다
로그인 양식은 물론
여기 JSX 코드에도 출력되어야 합니다
다시 StateLogin.jsx로 돌아와보면
이 컴포넌트에 계산형 값을 추가하는 방식 등으로
매 키 입력의 이메일 입력값을
검증할 수 있습니다
말하자면 이메일 입력값이 변경되어
컴포넌트 함수가 다시 실행될 때마다
새로운 값이 계산되는 것입니다
그 값을 emailIsInvalid 라고 해 보겠습니다
그리고 이것을 True 또는 False로 설정해 저장하고
여기 양식에 사용하여
양식의 모양을 업데이트 하거나
오류 메시지를 출력할 수 있습니다
그리고 이 emailIsInvalid 라는 상수를
우리가 관리하는 이 이메일 상태값을 기반으로 설정할 수 있습니다
만약 입력된 이메일이 @ 부호를 포함하고 있지 않다면
emailIsInvalid는 True, 즉 이메일이 유효하지 않다라는 것이 됩니다
이것을 위해 우리는
모든 문자열에서 지원하는 includes 메소드를 사용해
해당 내용 앞에 느낌표를 추가함으로
이메일에 @ 부호가 없는지를 확인할 수 있습니다
이렇게 우리는 입력된 이메일에
@ 부호가 없는지를 확인하고
만약 없다면, emailIsInvalid가 True가 됩니다
이 정보를 가지고 우리는 UI를 업데이트 할 수 있고
이메일 입력창에
새로운 디브(div)를 추가해서 클래스명을
control-error라고 할 텐데
이것은 초기 프로젝트의 일부인 인덱스 파일(Index.css)에
제가 사전에 준비해둔 CSS 클래스입니다
그리고 여기에는 이메일이 유효하지 않다면
즉 이것이 True일 경우 출력될 오류 메시지를 위해
여기에 emailIsInvalid를 출력값으로 설정하고
이것이 True일 경우 출력될 문구 단락을 넣어
원하는 오류 메시지가 보여지도록 할 것입니다
예를 들자면
'유효한 이메일 주소를 입력해 주십시오' 같은 것입니다
이것을 저장한 후
페이지를 다시 로딩하면 이러한 오류 메시지가 보여지고
이 오류 메시지는
제가 여기에 @ 부호를 넣게 되면
다시 말해, 이메일 주소가 유효하게 되면 바로 사라집니다
만약 제가 @ 부호를 지워서 다시 이것을 유효하지 않게 만든다면
오류 메시지는 다시 나타나게 됩니다
이 것이 매 키 입력에 따른 검증을 하는 방법입니다만
지금 시점에서 이 접근법은 완벽하지는 않습니다
그 이유는 이 오류 메시지가
지금 처음부터 바로 보여지고 있는데
여러분은 이를 원치 않을 수도 있기 때문이고
여러분 입장에서는 이러한 오류 메시지를 보여주기 전에
사용자로 하여금 올바른 값을 입력할
기회를 주고 싶을 수도 있기 때문입니다
그러므로
이 emailIsInvalid가 True로 설정되는 조건을
사용자가 값을 입력하기 시작하는 때로 해 두겠습니다
그리고 그렇게 될 수 있도록
enteredValues.email의 값이
빈 문자열과 같지 아니하고
@ 부호를 포함하고 있는지 확인하겠습니다
만약 이것이 빈 문자열이라면 이것은 False가 되어
무효한 것으로 표시되지 않을 것인데
이것은 우리가 보는 것이 아직은 값의 시작점일 뿐이기에
일단은 이것을 True로 설정하지 않겠습니다
수정을 마치고 새로고침을 해 보면
해당 오류 메시지는 사라져 있지만, 이 메시지는
글자를 처음 입력하는 순간부터 유효한 값이 입력될 때까지 보여지게 됩니다
그러나 이 방식에는 두 가지의 문제점이 있습니다
하나의 문제는, 만약 유효한 이메일을 입력한 뒤
해당 내용을 지우게 되었을 경우
여기에 오류 메시지가 보여지지 않는데
이메일 란이 비어있는 문자열인지 확인하고
해당되는 경우 emailIsInvalid가
절대 True로 설정되지 않기 때문입니다
우리가 여기에서 마주하게 되는 또다른 문제는
다름이 아니라
오류 메시지가 처음부터 보여지지는 않지만
사용자가 타이핑을 시작하자마자 보게 된다는 것입니다
이것은 곧, 이 시점에서
사용자는 유효한 값을 입력할
기회조차 없었다는 것을 의미합니다
앞의 슬라이드를 통해 언급했던 바와 같이
이 오류 메시지는 너무 이르게 보여지고 있고
그렇기 때문에 다음 시간에는 포커스 해제 상황에서 검증을 하는 것과
이것이 어떻게 유효한 접근법이 될 수 있는지 보겠습니다