다음으로 selectedDate라는 상태를 만들어주세요. 이 값은 현재 선택된 날짜를 의미하며 기본값은 오늘 날짜입니다.

    screens/CalendarScreen.js

    import {format} from 'date-fns';
    import React, {useContext, useState} from 'react';
    import CalendarView from '../components/CalendarView';
    import LogContext from '../contexts/LogContext';
    
    function CalendarScreen() {
      const {logs} = useContext(LogContext);
      const [selectedDate, setSelectedDate] = useState(
        format(new Date(), 'yyyy-MM-dd'),
      );
    
      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}
          selectedDate={selectedDate}
          onSelectDate={setSelectedDate}
        />
      );
    }
    
    export default CalendarScreen;

    selectedDatesetSelectedDate 또한 CalendarView에 전달해주세요. setSelectedDateonSelectDate라는 이름으로 설정하겠습니다.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.