양식이 제출될 때
이렇게 코드를 추가해서 입력을 검증할 수도 있지만
이보다 더 쉬운 방법이 있는데
일단 좀더 복잡한 양식이 있는
Signup 컴포넌트로 돌아가 보겠습니다
물론 여기에서도 키 입력이나 포커스 리스닝을 통해
이 모든 것들이 가능합니다만
그렇게 하기 위해서는 많은 코드를 써야 하고
지난 강의에서의 Login 양식에서와 같이
제출될 때의 양식을
다룰 수도 있겠지만
좀더 쉬운 방법이 있습니다
우선은 import를 통해
components/Signup.jsx 로부터
Signup 컴포넌트를 불러와서
여기 JSX 코드에서 사용하도록 하겠습니다
양식이 제출되었을 때
이 모든 입력값을 검증하기 위해서
보다 쉬운 길로 가보자면
당장은 커스텀 코드를 작성할 필요도 없고
그대신 리액트가 아닌
브라우저가 제공하는 빌트인 속성을
사용하는 방법으로
입력 HTML 요소에
관련 내용을 추가해 보겠습니다
예를 들면 required 속성입니다
required 속성은 브라우저가 사용자 입력을 검증할 수 있도록
입력 요소에 설정해 둘 수 있는
여러 빌트인 속성 중 하나입니다
관련 내용을 보다 자세히 알고 싶으시다면
HTML form validation을 검색해서
나오는 기사들 중
MDN의 기사를 참고하셔서
양식 유효성 검사를 비롯해
이러한 빌트인 속성에 대해 배우실 수 있는데
브라우저를 통한 유효성 검사 실행의 제어를 위해
양식 제어 요소에 추가할 수 있는 것들이
여러 가지 있습니다
예를 들어, required를 추가하면
브라우저는 해당 입력창이 비어있는 상태로
제출되는 것을 허가하지 않고
그에 더해, 입력창의 유형(type)을
함께 고려합니다
예를 들어 해당 유형이 email인 경우
이메일 주소가 아닌 값을 받아들이지 않는 것입니다
이렇게 required를 email에 추가한 채 저장하고
양식을 다시 로딩한 뒤
이렇게 회원가입을 하려고 하면
해당 란에 입력을 요구하는 오류 메시지가 나타납니다
해당 자리에 값이 입력되었지만
유효한 이메일 주소가 아닐 경우
저도 리액트도 아닌 브라우저 자체로부터
해당 내용이 유효하지 않은 이메일 주소이며
@ 부호가 포함되어 있어야 한다는
오류 메시지를 받게 되고
그렇게 해야만 제출이 가능해집니다
이렇듯, 직접 코드를 작성해줄 필요 없이
이러한 속성을 추가해 주기만 하면 되기 때문에
더 쉽게 검증을 진행할 수 있습니다
여기 password 에도 이것을 추가하겠습니다
password 필드에는
required와 같은 빌트인 속성인
minLength 속성을 추가해서
minLength 검증 속성을 설정해 주겠습니다
이 기능은 해당 란에 입력된 값의
최소 길이를 정의할 수 있도록 해 주는데
예를 들자면 입력한 패스워드가
최소 6글자 이상이어야 한다거나 하는 것입니다
여기 이런 입력에도 추가하고
여기에도 required를 추가해주고
select에도 추가해 주겠습니다
이것은 입력 요소에 국한되지 않으며
select와 같은 모든 양식 제어 요소는
이러한 스페셜 속성을 지원합니다
여기에도 가능합니다
이 입력값은 그대로 두고 싶은데
그 이유는 해당 체크박스가 선택항목이기 때문입니다
그렇기 때문에 여기에는 required를 추가하지 않겠지만
이용약관 체크박스에는 이렇게 추가하겠습니다
이 모든 것을 마무리하고 제출을 하게 되면
유효하지 않은 모든 입력칸에 오류 메시지가 보여집니다
지금처럼 패스워드란에 보여지고
입력한 패스워드가 너무 짧을 경우
보시다시피 관련 내용이 이렇게 출력됩니다
그러므로 오류 메시지가 나오지 않게 하기 위해서는
모든 입력란에
관련 데이터값을 입력해야만 하는 것입니다