[react-native] datetimepicker & modal

 react-native-community/datetimepicker는 React Native에서 날짜 및 시간 선택 기능을 제공하는 컴포넌트이다.

 

이 컴포넌트는 Android와 iOS 플랫폼을 모두 지원하며, 사용자에게 친숙한 네이티브 날짜 및 시간 선택 도구를 제공한다.

 

react-native-community/datetimepicker를 사용하기 전에, 먼저 npm 또는 yarn을 사용하여 프로젝트에 설치해야 한다. 설치 명령은 다음과 같다.

 

yarn add @react-native-community/datetimepicker

 

이제 사용법을 알아보자.

---

다음은 간단한 날짜 선택기 예시이다.

 

import React, {useState} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const DatePickerExample = () => {
  const [date, setDate] = useState(new Date());
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate);
  };

  const showDatepicker = () => {
    setShow(true);
  };

  return (
    <View>
      <Button onPress={showDatepicker} title="날짜 선택" />
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode="date"
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

export default DatePickerExample;

주요 Props

• mode: 선택기의 유형을 결정한다 (date, time, datetime 중 선택).
• value: 선택기의 현재 값을 나타내는 Date 객체.
• onChange: 날짜 또는 시간이 변경될 때 호출되는 함수. 변경된 날짜와 이벤트를 매개변수로 받는다.
• display: Android에서 날짜 및 시간 선택기의 표시 방식을 결정한다 (default, spinner, calendar, clock 중 선택).

react-native-community/datetimepicker는 다양한 설정과 스타일링 옵션을 제공하여, 개발자가 애플리케이션의 요구 사항에 맞게 날짜 및 시간 선택기를 사용자 정의할 수 있도록 한다. 추가적인 속성과 메서드에 대한 자세한 정보는 여기를 참조하쟈.

 

또한 Modal 창을 띄우고, 해당 모달 창에서 선택한 Date를 전달할 수 있는 컴포넌트도 가지고 있다.

yarn add react-native-modal-datetime-picker

 

모달을 사용하기 위해서는, 위 모달 버전 라이브러리도 설치해야 한다.

 

예제 코드도 보자.

import React, {useState} from 'react';
import {View, Button} from 'react-native';
import DateTimePickerModal from "react-native-modal-datetime-picker";

const DateTimePickerModalExample = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date) => {
    console.log("A date has been picked: ", date);
    hideDatePicker();
  };

  return (
    <View>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
    </View>
  );
};

export default DateTimePickerModalExample;

 

주요 Props

• isVisible: 모달의 표시 여부를 제어하는 불리언 값이다.
• mode: 선택기의 유형을 결정한다 (date, time, datetime 중 선택).
• onConfirm: 사용자가 날짜나 시간을 선택하고 확인 버튼을 눌렀을 때 호출되는 함수. 선택된 Date 객체를 매개변수로 받는다.
• onCancel: 사용자가 취소 버튼을 누르거나 모달 밖의 영역을 탭했을 때 호출되는 함수. 별도의 매개변수를 받지 않는다.
• date: (선택 사항) 모달에 초기에 표시될 날짜를 설정하는 Date 객체이다. 기본값은 현재 날짜이다.

DateTimePickerModal 컴포넌트는 사용자가 날짜와 시간을 선택할 때 간편하고 직관적인 인터페이스를 제공한다. 추가적인 설정과 옵션에 대해서는 react-native-modal-datetime-picker 마찬가지로 라이브러리의 공식 문서를 참조하자.