[REACT] - 숫자만 받기 (보완점 많음)

리액트를 배우고 있어서 아주아주 깔끔하지 않지만 숫자만 받는데 

type="number" 로만 처리하는데 신경쓰여서 한번 만들어 보자 하고 만들어 보았다

 

---

    const OnlyNumber = (e, predata) => {

        const curType = e.nativeEvent.inputType;

        const curValue = e.nativeEvent.data;

        if (curValue !== "" && curValue !== null) {

            const newValue = curValue.replace(/[^0-9]/g, '');

            setMovieYear(predata + newValue)

        } else if (curType === "deleteContentBackward") {

            const delData = predata.slice(0,-1);

            setMovieYear(delData)

        }

    };

해당함수를 선언해두고 

---

     <input type="text" value={movieYear} placeholder= "숫자만 입력해주세요" onChange={e => OnlyNumber(e, movieYear)}>

return 문의 html 코드는 이렇게 사용한다 

 

 

---

개발 스토리

코드를 쓰다보면 함수가 아무리 복잡하고 어려워도 함수를 작동하는 방식은

간결하고 깔끔해야만 한다는 생각으로 개발중이다 

 

코드를 보면 알겠지만 깔끔하지 않다 nativeEvent안에 값을 받아서 replace 돌리고

값을 세팅해주는 방식인데 이전의 값을 더해주지 않으니 초기화 되어

1자리 이상값세팅이 안되어서 이전의 값도 불러와서 이전의 문자열에 더해주는 방식이다

 

그랬더니 끝난줄알았는데 지우기 키를 입력하니 콘솔이 터졌다 가져온 값이 null 이라서

replace 함수가 터져버렸다

 

콘솔로 e를 찍어서 지우기 키입력의 고유값을 찾아봤다 그중에 

inputType: "deleteContentBackward" 이게 눈에 띄었다 다른 키를 입력하면서 다른 키는 어떻게 받나 확인했다

inputType: "insertText" 다른 키들은 다 이런식이었다

 

그럼 이값으로 if문을 마저 짜자

e.nativeEvent.inputType; 를 가져오고 else if 로 구분까지는 했다

 

그런데 문자열 뒤에 하나를 잘라서 다시 set 하고 이게 맞는건지 의문이 들었지만 지금은 REACT를 배우고있고 js함수 방식으로 적용하는 방식을 잘모른다..

그러니 그냥 이가 없으면 잇몸으로라도 악으로 깡으로 만들어보자

slice(0,-1);

함수를 사용해서 일단 뒤에 문자열을 지우는데는 성공했다

 

느낀점

html5 매뉴얼 만들어주는 분들이 조금은 원망스럽다 e를 사용할수있는

number와 오로지 숫자만 입력되는 OnlyNumber를 지원해줬더라면 이런 고생은 하지 않았을것이다

그래도 삽질을 하면서 생각하는대로 잘풀려서 함수를 만드는데 성공했다.