React Native 달력 화면 만들기

리액트 네이티브에서 달력 화면을 만들때는 react-native-calendars라는 라이브러리를 사용한다.

설치 및 사용법

아래 명령어를 통해 라이브러리를 설치하고 디바이스를 다시 로드해준다.

$ yarn add react-native-calendars
$ npx pod-install
$ yarn ios
$ yarn android

아래는 react-native-calendars 라이브러리 사용 예제 코드다.

import React from "react";
import { Calendar } from "react-native-calendars";
import { StyleSheet } from "react-native";

function CalendarView() {
  return (
    <Calendar style={styles.calendar} />
  );
}

const styles = StyleSheet.create({
  calendar: {
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  }
});

export default CalendarView;

---

달력에 표시하기

달력 특정한 날짜에 표시가 되도록 위에 예제 코드를 수정해보자

import React from "react";
import { Calendar } from "react-native-calendars";
import { StyleSheet } from "react-native";

function CalendarView() {
  const markedDates = {
    '2022-02-26': { selected: true },
    '2022-02-27': { marked: true },
    '2022-02-28': { marked: true }
  }
  return (
    <Calendar 
      style={styles.calendar} 
      markedDates={markedDates}
      theme={{
        selectedDayBackgroundColor: 'red',
        arrowColor: 'blue',
        dotColor: 'green',
        todayTextColor: 'yellow',
      }} />
  );
}

const styles = StyleSheet.create({
  calendar: {
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  }
});

export default CalendarView;

달력에 표시하기 위해 markedDates라는 객체를 사용한다. 

표시를 원하는 날짜를 키 값으로 두는 객체를 만들고 marked와 selected를 설정해준다. 이 객체에 들어가는 키 값은 날짜의 yyyy-MM-dd 형태다.

marked 값을 true로 설정하면 날짜에 점이 나타나고, selected 값을 true로 설정하면 이 날짜를 선택했다는 의미로 날짜의 배경색을 변경한다.

표시하는 색상은 theme라는 Props를 통해 변경할 수 있다. 위에 설정한 색상을 구분해 어떤 부분의 색상인지 구분하면 되겠다.

참고로 달력에서 사용하는 색상은 앱을 리로드해야 반영된다.

---

날짜 선택하기

날짜를 선택할때는 Calendar 컴포넌트에 onDayPress Props를 설정하면 된다.

import React, { useContext, useState } from "react";
import { format } from "date-fns";
import { Calendar } from "react-native-calendars";
import { StyleSheet } from "react-native";

function CalendarView() {

  const posts = [
    {
      id: 1,
      title: "제목입니다.",
      contents: "내용입니다.",
      date: "2022-02-26",
    },
    {
      id: 2,
      title: "제목입니다.",
      contents: "내용입니다.",
      date: "2022-02-27",
    }
  ];
  const markedDates = posts.reduce((acc, current) => {
    const formattedDate = format(new Date(current.date), 'yyyy-MM-dd');
    acc[formattedDate] = {marked: true};
    return acc;
  }, {});

  const [selectedDate, setSelectedDate] = useState(
    format(new Date(), "yyyy-MM-dd"),
  );
  const markedSelectedDates = {
    ...markedDates,
    [selectedDate]: {
      selected: true,
      marked: markedDates[selectedDate]?.marked,
    }
  }

  return (
    <Calendar 
      style={styles.calendar} 
      markedDates={markedSelectedDates}
      theme={{
        selectedDayBackgroundColor: '#009688',
        arrowColor: '#009688',
        dotColor: '#009688',
        todayTextColor: '#009688',
      }} 
      onDayPress={(day) => {
        setSelectedDate(day.dateString)
      }} />
  );
}

const styles = StyleSheet.create({
  calendar: {
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  }
});

export default CalendarView;

위 예제는 달력에 날짜를 클릭했을때 해당 날짜의 selected 값을 true로 설정하는 코드다.

예제 코드를 하나씩 살펴보자.

---

const posts = [
  {
    id: 1,
    title: "제목입니다.",
    contents: "내용입니다.",
    date: "2022-02-26",
  },
  {
    id: 2,
    title: "제목입니다.",
    contents: "내용입니다.",
    date: "2022-02-27",
  }
];
const markedDates = posts.reduce((acc, current) => {
  const formattedDate = format(new Date(current.date), 'yyyy-MM-dd');
  acc[formattedDate] = {marked: true};
  return acc;
}, {});

posts라는 배열 형태에 데이터를 만들고 reduce 라는 배열 내장 함수를 사용해 데이터의 날짜를 포맷 후, 해당 날짜에 marked 표시를 하도록 처리 후 반환하였다.

markedDates의 값은 아래와 같을 것이다.

{ "2022-02-26": {marked: true}, "2022-02-27": {marked: true} }

reduce 함수에 acc는 accumulator를 의미하는데, 누적된 값이라는 뜻이고 current는 현재 처리중인 값을 가리킨다.

reduce 함수가 익숙하지 않다면 아래 링크를 참조바란다.

배열과 메서드

---

const [selectedDate, setSelectedDate] = useState(
  format(new Date(), "yyyy-MM-dd"),
);
const markedSelectedDates = {
  ...markedDates,
  [selectedDate]: {
    selected: true,
    marked: markedDates[selectedDate]?.marked,
  }
}

return (
  <Calendar 
    ...
    markedDates={markedSelectedDates}
    ...
    onDayPress={(day) => {
      setSelectedDate(day.dateString)
    }} />
);

useState를 사용해 selectedDate 변수를 만들고 onDayPress 설정에 날짜를 선택 시에 해당 날짜는 selectedDate에 저장하도록 하였다.

onDayPress에 day 객체는 dateString, day, month, timestamp, year의 정보가 들어있다.

 

markedSelectedDates는 위에서 처리한 markedDates에 selectedDate를 추가하고 selected: true를 설정하였다.

만약 오늘이 2022-02-27일이라면 markedSelectedDates의 값은 아래와 같을 것이다.

{ "2022-02-26": {marked: true}, "2022-02-27": {selected: true, marked: true} }

이제 실행 결과를 확인해 보자.

좌측부터 / 초기화면 / 26일 선택 시 화면 / 28일 선택 시 화면

---

 

 

 

더욱 자세한 정보는 아래 GitHub에서 확인할 수 있다.

GitHub - wix/react-native-calendars: React Native Calendar Components 🗓️ 📆