Home page에서 getMonthlyData 함수

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.12) Home 페이지 구현하기 3. 회고

해결된 질문

작성

수정됨

const getMonthlyData = (pivotDate, data) => {
  //컴포넌트 밖에서 함수를 만드는 이유?
  const beginTime = new Date(
    pivotDate.getFullYear(),
    pivotDate.getMonth(),
    1,
    0,
    0,
    0
  ).getTime();

  const endTime = new Date(
    pivotDate.getFullYear(),
    pivotDate.getMonth() + 1,
    0, 
    0,
    0,
    0
  ).getTime();

  return data.filter(
    (item) => beginTime <= item.createdDate && item.createdDate <= endTime
  );
};

endtime을 0일 23시 59분 59초가 아닌 0일 0시 0분 0초로 설정해도 될까요? 월에서 +1을 했으니 마지막 일도 포함될 거 같아서요!

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

그럴 경우 말일에 기록된 일기가 정상적으로 포함되지 않는 경우가 생길수도 있습니다.

예를 들어 일기가 이번달의 말일인 10월 31일 23시 50분 50초에 작성되었다고 가정해보겠습니다. 그런데 위와 같이 설정하면 10월의 endTime은 10월 31일 00시 00분 00초로 설정됩니다.

이렇게 되면 endTime이 우리가 10월의 말일에 작성한 일기보다 과거가 되어버려 정상적으로 해당 월의 모든 일기를 포함하지 못하게 될 수 있습니다.

따라서 강의에서는 이런 문제를 방지하기 위해 23시 59분 59초로 설정하고 있습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

질문 주셔서 감사합니다. 두 가지 질문에 대해 답변드리겠습니다.

endTime 설정에 대한 질문:
- endTime을 0일 23시 59분 59초가 아닌 0일 0시 0분 0초로 설정하면, 해당 월의 마지막 날짜 데이터를 포함하지 않게 됩니다. 이는 월간 데이터의 범위를 설정할 때 중요한 부분이니, 의도치 않은 데이터 누락이 발생하지 않도록 신경 쓰셔야 합니다. 보통의 경우에는 0일 23시 59분 59초로 설정하여 월의 마지막 날까지 포함하도록 합니다.
함수 위치에 관한 질문:
- getMonthlyData 함수를 컴포넌트 외부에 선언하는 이유는 리렌더링 시 함수의 재생성을 방지하기 위함입니다. 이는 성능 최적화에 도움이 됩니다.
- onIncreaseMonth나 onDecreaseMonth 함수도 외부에 선언할 수 있지만, 이 함수들이 컴포넌트의 내부 상태(이를테면 현재 월의 정보)에 의존한다면, 내부에 두는 것이 더 적합할 수 있습니다. 컴포넌트 내부에 선언된 함수들이 종속적인 데이터가 변경될 때 자동으로 갱신되어야 한다면, 내부에 두시는 것이 더 편리합니다. 그렇지 않다면 외부에 선언하여 렌더링 최적화를 가져갈 수 있습니다.

이 게시물에서도 비슷한 주제를 다루고 있으니 참고해보세요: diaryList 날짜 필터 관련 질문 해결

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

Home page에서 getMonthlyData 함수