브라우저와 더불어
브라우저의 빌트인 유효성 검사 속성을 사용하는 것은
유효성 검사기능을 추가하는 매우 좋은 방법이며
제가 주로 추천드리는 방법이기도 한데
그 이유는 여러분 쪽에서 추가적으로 준비할
별도의 리액트 또는 자바스크립트 로직이 없기 때문입니다
물론 기본 검사 이외에
추가적인 검사를 진행하고 싶으시다면
필요한 로직을 추가해 주시면 됩니다
예시로, 여기 회원가입 양식에 있는
confirm-password 필드에 입력된 값이
여기에 있는 입력창에 입력된 값과
일치해야 하는 상황에서
이러한 검사 과정의 추가를
match 또는 그 비슷한 역할을 해줄
빌트인 속성이 없다고 해봅시다
물론 여기에 있는 것과 같은
빌트인 속성을 사용한다고 해서
우리가 직접 쓴 로직을 추가하거나
이를 빌트인 로직과 결합하여 사용할 수 없다는 것은 아닙니다
예를 들어, 이 컴포넌트에 추가적인 상태를 더해
패스워드가 동일하지 않을 경우의 오류 출력을 위한
passwordsAreNotEqual을 비롯하여
setPasswordAreNotEqual 이라는
상태 업데이트 함수를 부여하겠습니다
여기의 초기값은 False로 해두고
이 쪽에서는
콘솔이 데이터 기록을 하기 전 양식이 제출되면
if (data.password) 를 이용해 검사를 진행할 수 있는데
이 입력의 이름을 password로 해두었기 때문이고
해당 패스워드가 데이터와 일치하지 않을 경우
confirm-password 속성이 작동하도록 합니다
여기에는 대시(-)가 포함되어 있기 때문에
대괄호를 사용해 주어야 하는데
대시는 유효하지 않은 글자로 인식되기에
온점은 여기에 사용할 수 없기 때문입니다
그렇기에 이렇게 대괄호를 사용하고 있고
여기에 있는 confirm-password 속성에 접근하는데
제가 confirm password 입력값에
confirm-password 라는 이름을 붙였기 때문입니다
이번에는 이어서
여기 두 입력값의 내용(quality)을 검사해서
만약 일치하지 않을 경우
return을 사용해 이후의 코드가 실행되지 않도록 설정해
그 아래에 있는 이 코드가 실행되지 않도록 해 두겠습니다
그리고 새롭게 추가된 이 상태를 사용해서
setPasswordsAreNotEqual을 True로 설정하겠습니다
이렇게 함으로 저는 제가 작성한 유효성 검사 로직과
이 빌트인 로직을 섞어서 사용할 수 있게 되었습니다
이번에는 passwordsAreNotEqual을 사용해
해당 경우에 오류 메시지가 보여지도록 해 보겠습니다
그리고 그렇게 하기 위해서
여기 confirm-password 입력값 아래로 또다른 디브(div)를 추가해서
control-error 클래스 이름을 적어넣은 뒤
패스워드가 일치하는지를 확인하고
불일치한다면 오류 메시지를 출력해
'비밀번호가 일치하지 않습니다'라는 문구가 보여지도록 하겠습니다
이제 이것을 저장하고 새로고침을 하면
브라우저의 기본 검사가 여전히 진행됩니다
이렇게 양식을 작성하면서
다른 패스워드를 입력해 보는 와중에
여기에 작은 오류가 있는 것을 볼 수 있는데
이부분의 코드는 type=password로 설정되어 있어야 합니다
보여드린 것처럼 코드를 수정하셨다면
입력 글자는 가려져서 나타날 겁니다
어느 쪽이 되었거나, 만약 완전히 다른 값이 입력되고
양식의 나머지를 채워넣은 상태라면
회원가입을 클릭했을 때
여기에 아무런 로그가 뜨지는 않지만
이 오류 메시지가 나타납니다
이것은 우리가 양식에 추가해넣은
커스텀 로직으로 인한 것인데
여러분이 원하신다면 사용이 가능한 방법이기에
이렇게 직접 보여드렸습니다
물론, 빌트인 유효성 검사 기능을 사용한다고 해서
해당 기능에 국한될 필요는 없으며
양식에 여러분만의 커스텀 유효성 검사 로직을 추가하셔도 좋습니다