코드를 재사용하거나 단순화하는 것은
커스텀 컴포넌트의 단계에서 멈추지 않는데
그 이유는 커스텀 입력 컴포넌트를 추가하는 것이
분명 도움이 되기는 하지만
외부로 의탁이 가능한 유일한 코드는 아니기 때문입니다
또다른 예시로 이 유효성 검사 로직을 살펴볼까요?
당연하게도 이것들은 비교적 단순한 검사들입니다만
이 또한 앱의 여러 부분들에서
필요로 하는 로직에 속합니다
예를 들면, 모든 유효성 검사를 브라우저 기반의 기능을 사용하는 대신
수동으로 직접 추가해 주어야만 한다거나
Signup 컴포넌트에 있는
password와 email을 각각 체크해 주어야 할 겁니다
그렇기 때문에라도 이 유효성 로직도
재사용이 가능하도록 만들어 주는 것이 좋습니다
이것을 위해 저는 이 초기 프로젝트에
이미 util 폴더를 만들어 두었는데
여기에 있는 validation.js 파일에는
여러분 각자의 개인 프로젝트에서 사용해볼만한
유효성 검사 함수의 예시 몇 가지가 들어 있습니다
물론 해당 프로젝트를 위해서
이를 더 개선시키는 방법 또한 있겠습니다만
일단 가장 중요한 것은 지금 이 프로젝트에서도
사용이 가능하다는 것입니다
예를 들어, isEmail은 이 프로젝트에서
특정 데이터가 이메일인지 아닌지를 확인하는 검사를 정의하고
필요할 때마다 원하는 곳에 사용될 수 있습니다
예를 들자면 StateLogin.jsx에서
이제 util 폴더와 그 안의 validation.js로부터
가져오는 것이 가능한데
isEmail이나 isNotEmpty와 hasMinLength와 같이
거기에 정의된 함수를 불러올 수 있다는 것입니다
입력된 내용이 이메일이 아닐 경우에는
해당 이메일이 유효하지 않다고 할 수 있는데
이것을 위해 isEmail에 이메일 값을 전해 주겠습니다
isNotEmpty가 아닌, 그러니까 실제로는 비어있는 경우에도
마찬가지로 무효한 상황이 됩니다
이것이 우리가 외부 의탁과 유효성 검증 로직의 재사용을 통해
이 검사를 개선할 수 있는 방법입니다
패스워드 부분에도 같은 작업을 해주도록 하겠습니다
didEdit.password를 통해 패스워드의 수정 여부를 확인하고
hasMinLength를 통해 최소 글자 수가 설정되어 있는지
그리고 해당 값이 확인된 시점에서는
우리가 원하는 최소 글자 수가 맞는지도 확인하겠습니다
그러므로 여기에서는 password를 첫 번째 값으로 하고
제가 원하는 최소 글자 수가 여섯 자리라고 한다면 6을
두 번째 값으로 설정하겠습니다
여기에는 느낌표를 넣어주어야 하는데
이는 해당 데이터가
이 조건에 부합하지 않음을 확인하기 위함이고
패스워드가 유효하지 않다면 passwordIsInvalid는 True가 됩니다
이렇게 해주면 이 유효성 검사 코드는 이제
이 컴포넌트에서 삭제할 수 있습니다
앞서 작업했을 때와 마찬가지로, 이번에도 동일하게 작동이 됩니다
이번에는 로직의 의탁과 재사용을 통해 진행해 보았습니다