[RN] 슬라이드 형식으로 react-native-calendar-range-picker를 활용한 간단한 캘린더 구현 방법

ReactNative에 대한 캘린더 관련 라이브러리들은 다양하게 존재합니다.

하지만 일반적인 캘린더 형식으로 버튼 클릭시 이전달과 다음달을 표기 되는 캘린더들이 아닌

이번에는 가져온 라이브러리는 슬라이드 형식으로 구성된 라이브러리를 가져왔습니다.

 

그렇다면??

해당 캘린더를 이용하여 무엇을 할 수 있으며,  기존 캘린더들과 다른 점과 좋은점에 대해 이야기를 해보겠습니다.

주요 특징들

• 날짜 선택: 단일, 다중 및 범위 날짜 선택을 지원합니다.
• 사용자 지정: 앱 디자인에 맞게 색상, 텍스트, 스타일에 대한 광범위한 사용자 지정 옵션을 제공합니다.
• locale 지원: 로케일 지원이 내장되어 있어 다양한 언어와 지역에 쉽게 적응할 수 있습니다.
• 경량: 가볍고 효율적으로 설계되어 여러 장치에서 원활한 성능을 보장합니다.

설치

프로젝트에 해당 라이브러리를 사용하실려면 react-native-calendar-range-picker를 설치하셔야 합니다.

$ yarn add react-native-calendar-range-picker

#or

$ npm install react-native-calendar-range-picker --save

 

Calendar 속성

속성	타입	설명
onChange	func	(필수) 날짜 데이터(시작, 종료 또는 단일 날짜)를 포함하여 요일에 실행되는 핸들러입니다.
singleSelectMode	boolean	단일 날짜만 선택하세요. (기본값 = false)
pastYearRange	number	과거로 스크롤할 수 있는 개월 수입니다. (기본값 = 1)
futureYearRange	number	미래로 스크롤할 수 있는 개월 수입니다. (기본값 = 2)
locale	object	locale 개체에 사용자 지정 locale을 추가하여 지역화할 수 있습니다.
startDate	string(YYYY-MM-DD)	처음에 표시되는 시작 날짜입니다.
endDate	string(YYYY-MM-DD)	처음에는 종료 날짜가 표시됩니다.
initialNumToRender	number	FlatListinitialNumToRender prop. (느린 초기 렌더링을 보호하기 위해)(기본값 = 7)
flatListProps	FlatList Props	FlatList
isMonthFirst	boolean	연도와 월 순서를 전환합니다. ( 2021 April -> April 2021 )
disabledBeforeToday	boolean	오늘 전날 선택을 비활성화합니다
style	object	스타일

 

기본 사용법

해당 라이브러리는 두 종류로 표기할 수 있습니다. 

기간을 설정하는 것 처럼 시작일과 마지막일을 선택하는 방식과 하루만 선택하는 방식으로 나뉘며,

해당 표기 방법은 singleSelectMode를 활용하여 가능합니다.

기간 선택

<View style={{ flex: 1 }}>
  <Calendar
    //시작일
    startDate="2020-05-05"
    //마지막일
    endDate="2020-05-12"
    onChange={({ startDate, endDate }) => console.log({ startDate, endDate })}
  />
</View>;

 

단일 선택

<View style={{ height: 600 }}>
  <Calendar
    //시작일만 입력
    startDate="2020-05-05"
    // 단일선택만 할 경우 해당 singleSelectMode를 입력해줍니다.
    singleSelectMode
    onChange={(date) => console.log(date)}
  />
</View>

 

위 베이직한 코드를 활용하면 기본적인 UI가 생성되는걸 확인하실 수 있습니다.

여기서 한국어로 표기하기 위해 속성값 중에서 locale속성을 활용하여 변경이 가능합니다.

 

Locale

const CUSTOM_LOCALE = {
    monthNames: [
    '01월',
    '02월',
    '03월',
    '04월',
    '05월',
    '06월',
    '07월',
    '08월',
    '09월',
    '10월',
    '11월',
    '12월',
    ],
    dayNames: ['일', '월', '화', '수', '목', '금', '토'],
    today: '오늘',
    year: '', // 연도 뒤에 문자 -> 2020{년}
  }

<Calendar
  locale={CUSTOM_LOCALE}
  ...
/>;

 

마지막으로 해당 캘린더 관련하여 커스텀 디자인을 하기 위해 일반적인 ReactNative Style 형식이 아닌 해당 라이브러리에서 제공하는 형식으로 작성을 해야합니다.

 

Style 예시

<Calendar
  style={{
    container: {},
    monthContainer: {},
    weekContainer:{},
    monthNameText: {},
    dayNameText: {},
    dayText: {},
    dayTextColor: '#f7f7f7',
    holidayColor: 'rgba(0,0,0,0.5)',
    todayColor: 'blue',
    disabledTextColor: '#Hex',
    selectedDayTextColor: '#Hex',
    selectedDayBackgroundColor: '#Hex',
    selectedBetweenDayTextColor: '#Hex',
    selectedBetweenDayBackgroundTextColor: '#Hex',
  }}
  ...
/>

 

해당 내용에 관련하여 자세하게 확인하고 싶으시다면 해당 링크를 참고하여 주시면 감사하겠습니다.

GitHub - huurray/react-native-calendar-range-picker: A Simple react native calendar picker using Hooks.

 

결론

해당 라이브러리를 찾게 된 계기는 이전에 작성하였던 캘린더들에 관하여 일요일, 토요일 관련 공휴일 부분에 대해

해당 일자들은 색이 칠해진 라이브러리들이 정말 없을까? 라는 생각에 찾게 되었습니다.

그렇게 찾게 된 라이브러리가 react-native-calendar-range-picker 이며, 해당 라이브러리는 슬라이드 형식으로 구성된 캘린더였고, 예약일자를 선택하는 기능으로는 나쁘지 않다고 생각했지만, 결과적으로 찾고자 한 라이브러리는 아니였습니다.

왜냐하면, 원하고자 한 주말에 색상을 표시하는 기능은 존재하였지만, 일정에 데이터를 표시를 한다면 아마 데이터 과부하 또는 수많은 데이터를 보여주기엔 딜레이가 심할 것 같다는 생각으로 스케줄을 만들 경우 부적합하다고 생각이 들었습니다.

 

기본적으로 슬라이드형식으로 모든 달들이 출력이 되는 형식이다 보니 다수의 데이터를 보여줄 경우에도 과부하 형상이 생기지 않을까 싶네요.

 

만약, 예약일자를 위한 캘린더를 구성하실 분들은 유용하게 사용할 수 있지 않을까 싶습니다.

 

그 외 캘린더 관련 내용을 보고 싶으시다면 해당 링크를 클릭해주시고,

혹시나 궁금하신 내용이 있으시다면 댓글로 남겨주세요

[RN] React Native에서 사용자 정의로 직접 캘린더(달력) 구현하기

 

RN에서 캘린더 기능 쉽게 추가하기 - React-Native-Calendars 라이브러리 활용 가이드