그다음에는 CalendarScreen에서 현재 선택된 날짜로 로그를 필터링해 FeedList에 전달하고 ListHeaderComponent에는 CalendarView를 설정하세요.

    screens/CalendarScreen.js

    import {format} from 'date-fns';
    import React, {useContext, useState} from 'react';
    import CalendarView from '../components/CalendarView';
    import FeedList from '../components/FeedList';
    import LogContext from '../contexts/LogContext';
    
    function CalendarScreen() {
      (...)
    
      const filteredLogs = logs.filter(
        (log) => format(new Date(log.date), 'yyyy-MM-dd') === selectedDate,
      );
      return (
        <FeedList
          logs={filteredLogs}
          ListHeaderComponent={
            <CalendarView
              markedDates={markedDates}
              selectedDate={selectedDate}
              onSelectDate={setSelectedDate}
            />
          }
        />
      );
    }
    
    export default CalendarScreen;
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.