React-native 생년월일 입력을 위한 DateTimePicker 추가하기

아이의 생년월일을 입력하기 위해서 직접 string으로 입력하는 방법도 있지만, 다른 앱들을 살펴보면 달력이 나와서 달력을 클릭하면 클릭한 값을 넣어준다. 웹개발자라면 input에 type만 설정해도 달력이 나와서 설정할 수 있다. React-native에도 비슷한 기능을 하는 라이브러리나 메서드가 있지 않을까?  

 

먼저 인터넷에서 찾아보자. 

 

DateTimePicker 

https://docs.expo.dev/versions/latest/sdk/date-time-picker/

DateTimePicker

expo에서 제공하는 라이브러리가 있음을 알 수 있다. 

 

공식 문서에 따라 설치를 진행하자

 

npx expo install @react-native-community/datetimepicker

 

1. 모듈 추가하기 

import DateTimePicker from '@react-native-community/datetimepicker';

 

2. DateTimePicker 추가하기

https://github.com/react-native-datetimepicker/datetimepicker

GitHub - react-native-datetimepicker/datetimepicker: React Native date & time picker component for iOS, Android and Windows

 

위 방식으로 사용하면 된다고 한다. 시도해보자

너무 쉽게 들어갔다.  ^^ 

 

3. DateTimePicker 선택한 값 사용하기

다음으로 유저가 선택한 날을 받아서 넣어줘야 한다. 이 또한 공식문서에서 제공한다. 

onChange 함수에서 제공하고 있다. 내용을 보면 event type이 set인 경우에 값이 세팅이 되는 경우이지 않을까? 구현 보고 확인해 보자

취소 버튼 클릭 시 type  - dismissed

확인 버튼 클릭 시 type - set

 

type이 set인 경우에만 birthday값을 setting 해주자. 

            <RNDateTimePicker 
            value={new Date()}
            onChange={ ({type}, day) => {
                if( type === "set" && day){
                    setBirthDay(day.toISOString().split('T')[0]); // yyyy-MM-dd 형식으로 저장
                }
            }}
            />

 

birthday에 값이 정상적으로 들어가진다. wow!

 

정리

• react-native에서 제공하는 DateTimePicker를 사용하여 아이의 태어난 날을 입력할 수 있다.  
• DateTimePicker의 취소 확인 버튼시 동작은 onChange함수로 사용 가능하다 

마무리

• DateTimePicker를 활용하여 태어난 날, 타이머, 등 다양한 기능을 사용할 수 있다. 

전체 코드 확인

• 태어난 날 클릭 시 DateTimePicker을 show, hide 하는 방식은 생략했다. 자세한 건 아래 코드에서 확인 가능합니다

https://github.com/ckdtjs505/wonder_weeks/commit/28221615ea5aab79226f376af03fb3c1e3a0f949

feat: 태어난 날 클릭시 달력 클릭 한 값으로 동작 되도록 UX 개선 · ckdtjs505/wonder_weeks@2822161