[React] Input태그 number타입 자릿수 제한

 

생년월일을 받는 Input 컴포넌트에서 연도는 4자리, 달은 2자리, 날짜는 2자리로 지정하고 싶었다.

 

 

그래서 찾아봤더니 Input태그에 maxlength를 지정하면 길이를 제한할 수 있으나, 타입이 number인 경우에는 불가능하다고 한다.

 

따라서 직접 onChangeHandler에서 다뤄야 했고, 코드를 다음과 같이 고쳤다.

const yearChangeHandler = (e) => {
    setUserInfo({ ...userInfo, year: e.target.value.slice(0, 4) });
};

const monthChangeHandler = (e) => {
    setUserInfo({ ...userInfo, month: e.target.value.slice(0, 2) });
};

const dayChangeHandler = (e) => {
    setUserInfo({ ...userInfo, day: e.target.value.slice(0, 2) });
};

<InputBirth
    yearChangeHandler={yearChangeHandler}
    monthChangeHandler={monthChangeHandler}
    dayChangeHandler={dayChangeHandler}
/>

그런데 이렇게 고치니까 화면에서 적용이 되지 않았다. 일반적인 Input태그였다면 작동을 했을 것이지만, 나는 Input을 커스텀한 <InputBirth />라는 컴포넌트를 사용했기 때문이었다.

 

위의 코드에서 볼 수 있듯이 <InputBirth /> 컴포넌트는 value 값을 따로 지정하지 않았다. 그래서 코드를 저렇게 작성하면 year, month, day값은 각각 4, 2, 2글자로 UserInfo에 정보는 잘 저장되지만, value를 따로 지정해주지 않으니 화면에서는 slice된 값을 보여주지 못하는 것이다.

 

따라서 <InputBirth /> 컴포넌트의 props로 value값을 넣을 수 있게 수정하고, 사용할 때에도 넘겨주는 방식으로 수정하였다.

<InputBirth
    yearValue={userInfo.year}
    monthValue={userInfo.month}
    dayValue={userInfo.day}
    yearChangeHandler={yearChangeHandler}
    monthChangeHandler={monthChangeHandler}
    dayChangeHandler={dayChangeHandler}
/>

이렇게 하면 handler안에서 자릿수가 제한된 number를 setUserInfo를 통해 저장하고, 저장된 state를 value값에서 받아와서 화면에 적절히 보여줄 수 있게 되는 것이다!  ٩( ᐛ )و