정의
- 사용자가 입력을 받는 숫자형 Input
기능
- 정수와 소수점 기호(특수문자 변경 가능)를 선택해서 입력할 수 있다.
- 소수점 자릿수를 설정할 수 있다.
- 소수점 설정 자리수마다 소수점을 찍어 줘야한다.
- .을 누르면 0. 이런 형태로 입력이 된다.
- 숫자를 입력하고 123에서 -를 누르면 -123 이런 형태로 변한다.
- 최대 자릿수를 설정하여 넘는다면 경고 alert를 출력하고 입력이 불가능하다.
- 값이 저장될 때는 특수문자를 제거하고 NumberType으로 저장돼야 한다.
문제
- Input Component 자체에서 useEffect로 처리하다 보니 비즈니스 로직이 많이 섞여서 방대해졌다.
- 소수점 기호를 사용하기 때문에, 컴포넌트의 타입은 StringType인데, 저장할 때는 NumberType이다 보니 빈 값일 때 저장되는 값이 ''이 아니라 0으로 저장되어 불러올 때 빈값이 아니라 0이 보이는 현상.
해결
- useEffect로 처리된 기능을 CustomHook으로 빼서 비즈니스 로직 분리
- useValidator : 정수와 소수점 기호에 따라 최대 자릿수를 체크하고
- useDataFormatReverter : 소수점 기호를 삭제한 PureValue 반환
- onDataFormatter : 해당값으로 설정한 소수점 자릿수에 따라 설정한 기호를 찍어준 값을 반환
- 서버개발자분과 상의하여 저장시 StringType으로 변환
Frontend Junior