validation을 어디서 해야 하나

타이어 스쿼드에서 입력된 핸드폰 번호가 적절한지 판단하는 validation을 추가하기로 했다. PhoneInput을 사용하기만 하면 알아서 에러 메시지를 보여주길 원했기 때문에 컴포넌트 안에 errorMessage state를 넣었다.

컴포넌트 안에서만 동작하는 것은 문제가 없었으나, 올바른 핸드폰 번호가 입력되었는지 PhoneInput도 알아야 하고 Index도 알아야 했다. 왜냐하면 index 내부에 있는 submit은 핸드폰 번호에 문제가 없을 때 활성화되기 때문이다. 이럴 땐 어떻게 처리할 것인가?

팀장님께서 제안해주신 방식은 2가지이다.

1. PhoneInput에서 onChange = (phone:string, error: string) => {} 받아서 에러가 발생할 때마다 error를 바꾸는 것이다.
2. validatePhone()을 util에 만든다. 잘못된 값임을 설명하는 이유를 throw Error를 한다.
   • 010-1234 ➡ 문자 안돼
   • 010123412345 ➡ 11자 넘으면 안돼

이때 1번에서의 문제가 있다.

• impossible state가 생길 수 있다. (phone: 01012341234, error: "숫자만 입력해 주세요")라고 하면, phone은 올바르지만 에러가 생기는 이상한 state가 만들어진다. 이런 것을 막기 위해서는 error를 onChange로 받아서 변환하면 안 된다.

결론 👨‍⚖️

• validatePhone을 만들어서 필요할 때마다 불러서 사용하자.