React Native Calendars Agenda 사용기

캘린더를 통한 일정관리 스크린 구현

위 기능을 목표로 선택한 라이브러리는 자유도가 높고 유지보수가 꾸준한 React-native-calendars다. Calendar 컴포넌트를 기본 베이스로 CalendarList와 Agenda 확장 컴포넌트를 함께 제공하는데 CalendarList의 경우 무한 스크롤로 이어지는 달력 기능이며 Agenda는 기존 Calendar 컴포넌트와 FlatList를 조합하여 캘린더 데이터를 리스트 형태로 출력해주는 확장 기능이며 FlatList의 경우 구체적인 스타일 수정이 어려웠다.

하지만 기획단계에서 의도한 캘린더의 기능은 Agenda와 거의 흡사했기 떄문에 Agenda 컴포넌트로 달력의 스타일을 수정하고 선택된 날짜의 데이터를 커스텀된 FlatList 컴포넌트에 전달하여 Calendar Data List를 랜더링하고 Multy Dots을 구현, 백앤드 Api와 Agenda의 연결, 최대한 가독성 있는 레이아웃을 구현하는 것을 목표로 라이브러리를 활용했다.

Agenda의 다양한 속성(attribute)

레이아웃 구현과 데이터 랜더링을 위해 사용된 속성을 정리했다.

style : 캘린더 가장 외부의 크기와 레이아웃

onDayPress : 날짜를 입력했을 때의 동작을 결정하는 속성으로 실행할 클로저 함수를 값으로 받는다.

items: AgendaSchedule 배열을 전달받아 랜더링될 item을 뿌려주는 속성

export type AgendaEntry = {
    name: string;
    height: number;
    day: string;
};
export type AgendaSchedule = {
    [date: string]: AgendaEntry[];
};

loadItemsForMonth: 랜더링 시 해당 월의 아이템들을 가져올 때 사용되는 속성으로 로드되는 날짜를 매개변수로 받는 클로저 함수를 값으로 받음

selected: 캘린더의 현재 선택된 날짜, string 값을 받는다.

showClosingKnob: 날짜 선택 시 캘린더의 토글 상태가 활성화되는 데 이때 캘린더를 접었다 펼치는 ui의 노출 상태를 boolean으로 전달.

showSixWeeks: 월 간 날짜 출력을 5열 혹은 6열 or 항상 6열으로 할지 boolean으로 전달

theme: calendar의 색상, 서체, 구성요소의 레이아웃 등을 결정하는 style 속성

const theme = {
  calendarBackground: variables.main, // 캘린더 배경
  monthTextColor: 'white',
  textDayFontWeight: 'bold' as any, // 날짜 서체
  dayTextColor: 'white', // 캘린더 날짜 색상
  textDayFontSize: 14, // 캘린더 날짜 글씨 크기
  textSectionTitleColor: 'white', // 요일 날짜 글씨 크기
  todayTextColor: 'yellow',
  agendaDayTextColor: variables.text_3, // 날짜 글씨 색상
  agendaDayNumColor: variables.text_4, // 요일 글씨 색상
  agendaTodayColor: variables.main, // 당일 글씨 색상
  agendaKnobColor: '#ffffff60', // Knob => 문고리 / 캘린더 접었다폈다 하는 아이콘 색상
  indicatorColor: 'red',
  selectedDayBackgroundColor: 'white',
  selectedDayTextColor: variables.main,
  'stylesheet.calendar.header': {
    week: {marginTop: 0, flexDirection: 'row', justifyContent: 'space-between'},
  },
};

markedDates: dot을 포함해 캘린더에 표시되는 특정 날짜의 값과 속성, 스타일을 정해주는 속성

const markedDates = (selected: Date, today: string) => {
  return {
    [dateFormat(String(selected))]: {
      selected: true,
      selectedColor: 'white',
      selectedTextColor: variables.main,
      customContainerStyle: {
        borderWidth: 1,
        borderColor: '#fff',
      },
    },
    [today]: {
      selectedColor: 'white',
      selectedTextColor: variables.main,
      color: 'yellow',
      customContainerStyle: {
        borderWidth: 1,
        borderColor: '#fff',
      },
    },
  };
};

pagingEnabled: Calendar 컴포넌트를 스와이프할 때 월 별로 스와이프되도록 결정하는 속성, boolean을 값으로 전달받음

initialNumToRender: flatList(캘린더 데이터가 랜더링되는 리스트)에 표시될 초기 아이템 갯수를 설정하여 최적화할 수 있는 속성

windowSize: flatList(캘린더 데이터가 랜더링되는 리스트)가 렌더링되는 동안 얼마나 많은 아이템을 미리 렌더링할지를 결정하는 값

maxToRenderPerBatch: FlatList의 속성 중 하나로, 각 렌더링 배치에 포함되는 최대 아이템 수를 지정하고 기본값은 10

updateCellsBatchingPeriod: FlatList의 속성 중 하나로, 렌더링 배치 간의 간격을 밀리초 단위로 지정한다. 기본값은 50

removeClippedSubviews: 렌더링되지 않은 (화면 영역 밖에 있는) 아이템들을 메모리에서 언마운트하는 데 사용되는 값

onEndReachedThreshold:스크롤이 끝까지 도달하기 전에 onEndReached 콜백이 호출되도록 하는 임계값을 설정, 기본값 0.1

flatList 관련 속성은 대부분 Agenda의 최적화를 위해 사용되는 값이다.