screens/CalendarScreen.js

import {format} from 'date-fns';
import React, {useContext, useMemo, useState} from 'react';
import CalendarView from '../components/CalendarView';
import FeedList from '../components/FeedList';
import LogContext from '../contexts/LogContext';

function CalendarScreen() {
  const {logs} = useContext(LogContext);
  const [selectedDate, setSelectedDate] = useState(
    format(new Date(), 'yyyy-MM-dd'),
  );

  const markedDates = useMemo(
    () =>
      logs.reduce((acc, current) => {
        const formattedDate = format(new Date(current.date), 'yyyy-MM-dd');
        acc[formattedDate] = {marked: true};
        return acc;
      }, {}),
    [logs],
  );

(...)

이렇게 하면 logs 배열이 바뀔 때만 logs.reduce 함수가 수행됩니다.

filteredLogs 배열을 만드는 부분에 useMemo를 사용하는 것도 생각해볼 수 있는데요. 이 상황에 useMemo를 사용하는 것은 불필요합니다. 왜 그럴까요? 이 컴포넌트가 리렌더링되는 시점을 생각해보세요. selectedDate가 바뀌거나 logs가 바뀔 때인데 어차피 매번 필터링을 다시 해야 하기 때문입니다.