다음으로 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 () { const {logs} (LogContext); const [selectedDate, setSelectedDate] = useState( format(new Date(), 'yyyy-MM-dd'), ); const markedDates = logs. ((acc, current) => { const formattedDate = (new Date(current.date), 'yyyy-MM-dd'); acc[formattedDate] = {marked: true}; return acc; }, {}); return ( <CalendarView markedDates={markedDates} selectedDate={selectedDate} onSelectDate={setSelectedDate} /> ); } export default CalendarScreen;
selectedDate와 setSelectedDate 또한 CalendarView에 전달해주세요. setSelectedDate는 onSelectDate라는 이름으로 설정하겠습니다.