회원가입 폼 만들기 : 회원가입의 생년월일 이벤트 - Date Picker

 

 

나는 오늘 생년월일 달력에서 클릭 이벤트 말고

타이핑해서 입력 가능한 이벤트를 고민하던 중이었다.

 

 

 

function typingBirthday(e) {
    const dateStr = e.target.value;
    // console.log(dateStr);
    const year = dateStr.split("-");
    console.log(year);
    if (year[0].length == 4 && Number(year[0]) < 1900) {
      alert("연도는 1900년 이상부터 선택 가능합니다.");
      return setDate("");
    }
    else setDate(dateStr);
  }

처음에는 잘 되지만 이미 식이 완성된 시점부터는 한글자 타이핑마다 alert이 뜬다.

 

 

 

 

계속 고민했는데 아이디어가 고갈됐다 ㅠ

마침 달력 라이브러리라는 게 있길래 좀 더 간단하게 구현이 가능한지 찾아보다,

react date picker라는 라이브러리에서 키보드와 클릭 감지를 미리 나누어 둔 속성들이 있다고 해서 이 달력 라이브러리를 사용했다.

결과적으로는 키보드 이벤트 감지 속성이 있지는 않았다...

그래서 다른 방법을 생각해보려 한다.

 

 

 

 

기본 input date 디자인도 꽤 괜찮고 편리해보여서 괜찮았지만 만들어보니 이 라이브러리도 꽤 편리함을 가지고 있더라!

 

 

---

 

 

 

Date Picker 디자인과 편리성

 

 

연도, 월 선택 가능! Date Picker 라이브러리 사용

 

 

연도와 월을 선택할 수 있는 속성이 마련되어 있어 좋았다!

이게 더 편리해보이기도 하고!

내림차순 정렬이라 더 편하게 사용이 가능할 것 같다.

요 두 개는 속성 추가로 간단하게 구현이 가능하다.

 

 

 

공식문서인 것 같은데 여기서 도움을 많이 받았다! 아래 블로그 글도 참고할 수 있었다.

https://reactdatepicker.com/#example-year-picker

https://yongary.tistory.com/473

 

 

이 링크도 참고하고 싶었는데 커마까지는 회원가입 서비스에 필요 이상의 시간을 들일 수도 있을 것 같아서 우선은 링크만 ㅠㅠ 올린다.

https://mui.com/x/react-date-pickers/date-calendar/

 

 

---

 

 

 

 

💬 달력 라이브러리 컴포넌트를 사용해도 디자인 변경이 가능한가?

 

⭕

 

이 달력 라이브러리 컴포넌트를 쓰면 기본 input type=text 디자인처럼 되어있는데,

customInput이라는 속성을 사용하면 위 사진처럼 내가 원하는 부트스트랩 디자인으로 바꿀 수 있다!

 

 

Signup.jsx

<DatePicker 
        selected={date} 
        minDate={new Date(1900, 0, 1)}     < 최소 날짜는 1900/01/01 < 근데 아래서 재조정함
        maxDate={new Date()}               < 이 의미는 오늘 날짜까지
        dateFormat="yyyy-MM-dd"            < 포맷 (가운데만 대문자여야 함)
        showYearDropdown                   < 연도 드롭다운
        yearDropdownItemNumber={105}       < 최소 1920년까지 연도 출력
        showMonthDropdown                  < 월 드롭다운
        scrollableYearDropdown             < 연도 드롭다운 스크롤 되게
        locale={ko}                        < 달력 한글로
        // showYearPicker                  < 연도만 필요할 때 클릭하기 쉬운 레이아웃으로
        customInput={<CustomDateInput/>}   < DatePicker 양식을 내가 원하는 디자인으로!
 />

 

 

customInput 속성을 사용하면 그 옆에 써진 컴포넌트 디자인으로 바뀌게 도와준다.

 

 

Signup.jsx (return 밖에)

const CustomDateInput = React.forwardRef(({value, onClick, onChange}, ref) => (
    <>
      <label for="birthday" class="form-label">* 생년월일</label>
      <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon1">birthday</span>
          <input type="text" id="birthday" class="form-control" placeholder="생년월일" aria-label="생년월일" aria-describedby="basic-addon1"
          onClick={onClick} onChange={onChange} value={value} ref={ref}/>
      </div>
    </>
  ));

 

 

이렇게 forwardRef를 사용하면 되는데~~~

공식문서에서는 리액트 19버전부터 더 이상 사용되지 않는다고 하니 버전을 확인해보자!

https://ko.react.dev/reference/react/forwardRef

 

 

나는 18버전이라 forwardRef를 그냥 사용하려 한다.

다시 돌아가서 저 디자인은 리액트 부트스트랩의 한 input 디자인의 코드인데, 저 코드 외에도 추가해야할 게 있다.

가장 아래 줄 on시리즈들 value~ ref 모두 속성 기재를 해주어야 한다. 매개변수로 처음에 받아주고.

저것들이 없으면 date picker 이벤트 실행이나 입력값 등 날짜를 선택하기 위한 이벤트 처리가 되지 않는다고 한다.

또 이때 인풋 타입은 text로 지정해야 한다. date는 안 되더라아ㅠ

 

 

---

 

 

앞으로의 목표

 

• 폼의 유효성 검사 기능
  • 아이디 중복 검사
• 달력 키보드 입력값 오류 방지 코드 기능
• 이메일 자동 추천 기능
• 전화번호 자동 - 기능? (고민중)
• 전반적인 폼의 서브밋 기능과 서버에 잘 저장되도록 하기

 

 

 

 

사소한 부분도 편리하게 만들고 싶은데, 지금은 아이디어가 잘 떠오르지 않기도 하고

다른 해야 할 기능들이 많이 기다리고 있어서 내가 회원가입 이벤트에서 어떤 것을 해야 하는지 정리를 좀 했다.

 

그래도 저렇게 예쁘게 디자인 된 개발 구역들을 보면 참 마음이 좋다.ㅠㅠ

 

앞으로도 어떻게 해결할 수 있을지 고민을 더 해보며 다른 목표들도 하나씩 이루어 보자!😄