20230408 프로젝트 매일회고 / 유효성 검사 구현하기

오늘 배운 것

- Google OAuth로 회원 가입 후, 기본적인 회원 정보 설정하는 페이지에 안내와 유효성 검사를 추가했다. 

고민한 것

- 회원 정보 설정 페이지에는 이름 / 성별 / 예산 시작일 / 예산 금액 / 급여일 / 급여 금액

이렇게를 input으로 받고 있다. 

 

이 정보들의 유효성 검사를 다른 라이브러리의 도움 없이 구현해보고자 한다.

또한, 유효성 검사의 패스 여부에 따라 하단 '저장하기' 버튼을 활성화/비활성화 할 예정이다.

 

해결한 방법

- 유효성 검사의 기본 로직은 다음과 같다. 

 

- 상태 관리: 각 정보의 input value / 오류메세지 / 유효성검사 패스 여부 

- 상태 변경 로직: 

 

각 정보의 onChange 핸들러에

1. setInputValue(e.target.value)

조건문으로 분기하여 유효성 검사 조건 작성

(정규식으로 판별한다면 .test 메서드 사용)

-> 조건에 부합한다면: setErrorMessage('통과~~') / setIsPassed(true)

-> 조건에 부합하지 않는다면: setErrorMessage('2글자 이상 5글자 미만으로 입력해주세요') / setIsPassed(false)

 

이렇게 구현하고, 에러일 때와 패스일 때의 클래스를 지정해주어 조건부 스타일링을 적용하면 된다. 

마지막으로 모든 유효성 검사 상태들이 true 일 때에만 저장하기 버튼을 disabled 속성을 false로 변경하도록 해주면 된다.

 

해결해야 할 남은 문제

이렇게 구조를 짜고 나서, 어떻게 코드의 재사용성을 높일 수 있을지 고민했다.