더북(TheBook)

이제 달력에서 날짜를 선택했을 때 onSelectDate를 호출해줘야 합니다. 이는 CalendaronDayPress라는 Props를 설정해 구현할 수 있습니다.

components/CalendarView.js - return

function CalendarView({markedDates, selectedDate, onSelectDate}) {
  (...)
  return (
    <Calendar
      style={styles.calendar}
      markedDates={markedSelectedDate}
      onDayPress={(day) => {
        onSelectDate(day.dateString);
      }}
      theme={{
        selectedDayBackgroundColor: '#009688',
        arrowColor: '#009688',
        dotColor: '#009688',
        todayTextColor: '#009688',
      }}
    />
  );
}

참고로 여기서 day 객체는 다음과 같이 구성되어 있습니다.

{
  "dateString": "2021-08-23", 
  "day": 23, 
  "month": 8, 
  "timestamp": 1629676800000, 
  "year": 2021
}

자, 이제 날짜가 잘 선택되고, 작성된 날짜에 로그가 잘 표시되는지 확인해보세요.

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