더북(TheBook)

다음으로 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라는 이름으로 설정하겠습니다.

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