RN DateRangePicker 사용하기

이묘·2023년 9월 23일

React Native

목록 보기

2/3

서론

프로젝트에서 어플리케이션을 개발하던 중 기존 사용하고 있던 직접 만든 dateRangPicker에서 오류가 발생했다. 고치려고 노력해보았으나 버전 차이인지 뭔지 오류가 고쳐지지 않아서 새로운 라이브러리를 사용해보려고 한다.

결과 화면

물론 콘솔에도 잘 찍힙니다.

CODING

라이브러리

제가 사용한 라이브러리는 react-native-daterange-picker 입니다.
moment 라이브러리를 기본적으로 사용하고 있으므로 없으신 분들은 다운받아주시길 바랍니다.

https://github.com/Naxulanth/react-native-daterange-picker
다루지 않은 자세한 내용들은 위 공식 홈페이지에서 참고하시길 바랍니다.

함수형으로 바꾸기

공식 홈페이지에 들어가보면 알겠지만 일단 기본적으로 class형으로 되어있다. 요즘에는 다 함수형을 사용하기도 하고 나 또한 프로젝트에서 이미 함수형을 사용해왔기 때문에 이를 먼저 함수형으로 바꿔줘야한다.

// 코드
import React, {useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import moment from 'moment';
import DateRangePicker from 'react-native-daterange-picker';

const DatePickerScreen = props => {
  const [dateRange, setDateRange] = useState({
    startDate: null,	// range 시작 날짜
    endDate: null,		// range 끝 날짜
    displayedDate: moment(),	// 캘린더에 보이는 월
  });
  const [maxDate, setMaxDate] = useState(moment());

  const setDates = newDates => {
    setDateRange(prevState => ({
      ...prevState,
      ...newDates,
    }));
  };

  return (
    <View style={styles.container}>
      <DateRangePicker
        onChange={setDates}
        startDate={dateRange.startDate}
        endDate={dateRange.endDate}
        displayedDate={dateRange.displayedDate}
        maxDate={maxDate}	// 최대 날짜
        range				// 기간 선택을 위해 필요한 props
        >
        <Text>Click me!</Text>
      </DateRangePicker>
    </View>
  );
};

export default DatePickerScreen;

일단 이렇게 수정하면 기본적으로 위에 보이는 결과 화면대로 사용할 수 있다.
처음에는 dateRange와 displayDate가 서로 다른 useState에 있었는데 그렇게 하면 뒤로가기 버튼을 사용할 수 없거나 꼬이는 일이 발생하였다. 그래서 하나로 묶어서 사용하였다.

최대 날짜 지정하기

해당 프로젝트에서는 최대 3개월 까지의 내용만 조회가 가능하다.
예를 들어서 2023년 1월 1일을 선택하면 3개월 뒤인 3월 1일까지 선택이 가능하고 그 뒤로는 선택이 되지 않는 것이다. 또한 (현재날짜 9월 23일 기준) 8월 1일을 시작 날짜로 선택하면 3개월 뒤인 날짜인 11월 1일까지 조회가 가능하지만, 현재 날짜가 9월 23일이기에 9월 23일까지만 선택이 가능해야한다.

moment라이브러리를 사용중이기 때문에 날짜를 더하는건 어렵지 않다.

// 3개월을 더하는 함수
moment().add(3, 'months').format()

useEffect로 startDate가 변하는 것을 감지해서 변할 때, maxDate의 조건을 확인하면 된다. 따라서 아래 코드를 추가해주면 된다.

  // 최대 날짜 지정
  useEffect(() => {
    if (
      moment(dateRange.startDate).add(3, 'months').format() > moment().format()
    ) {
      setMaxDate(moment().format());
    } else {
      setMaxDate(moment(dateRange.startDate).add(3, 'months').format());
    }
  }, [dateRange.startDate, setMaxDate]);

전체 코드

import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import moment from 'moment';
import DateRangePicker from 'react-native-daterange-picker';
import {COLORS} from '../../style/Color';

const DatePickerScreen = props => {
  const [dateRange, setDateRange] = useState({
    startDate: null,
    endDate: null,
    displayedDate: moment(),
  });
  const [maxDate, setMaxDate] = useState(moment());

  const onChangeDatePicker = newDates => {
    setDateRange(prevState => ({
      ...prevState,
      ...newDates,
    }));
  };

  useEffect(() => {
    /**
     * maxDate 변경 함수
     */
    const SetMaxDateFun = () => {
      if (
        moment(dateRange.startDate).add(3, 'months').format() >
        moment().format()
      ) {
        setMaxDate(moment().format());
      } else {
        setMaxDate(moment(dateRange.startDate).add(3, 'months').format());
      }
    };
    SetMaxDateFun();
  }, [dateRange.startDate, setMaxDate]);

  return (
    <View style={styles.container}>
      <DateRangePicker
        onChange={onChangeDatePicker}
        startDate={dateRange.startDate}
        endDate={dateRange.endDate}
        displayedDate={dateRange.displayedDate}
        maxDate={maxDate}
        selectedStyle={{backgroundColor: COLORS.color_brand}} // 선택된 날짜의 스타일
        range>
        <Text>Click me!</Text>
      </DateRangePicker>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default DatePickerScreen;