[javascript] 한 자릿수 날짜 입력 시 두 자리로 만들기

Blocker :

백엔드에 생년월일 데이터를 저장할 때 8자리로 저장해야 하는 상황이었으나, 년/월/일을 따로 입력받아야 해 일을 1자리 입력 시 자동으로 0을 앞에 붙여줘서 백엔드에 데이터를 전송해야 했습니다.

처음에는 사용자가 입력 후 데이터를 전송하기 전에 0을 붙여서 전송하려고 했으나, 사용자가 입력 후 변경한 경우에도 변경된 값에 따라 수정되어야하기 때문에 무조건 input 값을 입력받는 onchange event의 함수에 0을 붙여주는 작업을 진행해야 했습니다.

---

해결방법 :

먼저, 생년월일 중 일에 해당하는 입력값을 담을 useState를 만들었습니다

그리고 입력된 값이 한자리 수인 경우 0을 붙여서 반환할 수 있는 formatDay 함수를 만들었습니다

최종적으로 사용자가 입력하는 값을 받아오는 handleDate 함수에서 e.target.value로 사용자의 입력값을 탐지하고,

사용자가 입력한 경우에만 formatDay함수를 통해 e.target.value의 값을 변형시켜줬습니다

  // 일 입력 값 저장하는 useState
  const [date, setDate] = useState('');
  
  // 한 자리 수인 경우 앞에 0을 붙여주는 함수
  const formatDay = day => {
    const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
    if (numbers.includes(day)) return `0${day}`;
    if (day.length >= 2 && day[0] === '0') return day.substring(1);
  };
  
  // onChange 이벤트에 적용되는 함수
  const handleDate = e => {
    const day = e.target.value;
    if (day !== '') {
      const formattedDay = formatDay(day);
      setDate(formattedDay);
    } else {
      setDate('');
    }
  };

---