7.5.2 데이터를 달력과 연동하기

달력에 표시하는 방법을 알았으니, 데이터의 날짜를 표시하도록 구현해보겠습니다. 우선 CalendarScreen에서 LogContext의 logs 배열을 받아오세요.

screens/CalendarScreen.js

import React, {useContext} from 'react';
import CalendarView from '../components/CalendarView';
import LogContext from '../contexts/LogContext';

function CalendarScreen() {
  const {logs} = useContext(LogContext);
  return <CalendarView />;
}

export default CalendarScreen;

다음으로 이 logs 배열을 Calendar 컴포넌트의 markedDates Props 형태로 변환해줍니다. 변환된 객체는 CalendarView에 전달해주세요.

screens/CalendarScreen.js

import {format} from 'date-fns';
import React, {useContext} from 'react';
import CalendarView from '../components/CalendarView';
import LogContext from '../contexts/LogContext';

function CalendarScreen() {
  const {logs} = useContext(LogContext);
  const markedDates = logs.reduce((acc, current) => {
    const formattedDate = format(new Date(current.date), 'yyyy-MM-dd');
    acc[formattedDate] = {marked: true};
    return acc;
  }, {});

  return <CalendarView markedDates={markedDates} />;
}

export default CalendarScreen;