[Next.js] 날짜 필터링 오류 해결하기(Feat. new Date())

DatePicker를 이용하여, 해당 날짜마다의 데이터를 출력하고싶었다. 

하지만 아직 서버를 구현하지 않아 DB에 연결하여 더미데이터를 만들 수 없었다.

그래서 일단은 아래와 같이 직접 일일이 더미데이터 한 7개 정도 만들어놨다. 

  const user_data = [
    {
      key: "1",
      category: "커피",
      detail: "라떼",
      price: 3500,
      date: new Date()
    },
    {
      key: "2",
      category: "외식",
      detail: "마라탕",
      price: 8000,
      date: new Date()
    },
    {
      key: "3",
      category: "집밥",
      detail: "나물",
      price: 30000,
      date: new Date()
    },
    {
      key: "4",
      category: "소설",
      detail: "아몬드",
      price: 8500,
      date: new Date()
    },
    {
      key: "5",
      category: "필기구",
      detail: "펜",
      price: 8500,
      date: new Date(2023, 4, 10)
    },
    {
      key: "6",
      category: "붕어빵",
      detail: "중요하지",
      price: 1500,
      date: new Date(2023, 4, 10)

    },
    {
      key: "7",
      category: "데이트",
      detail: "하지말걸",
      price: 100000,
      date: new Date(2023, 4, 10)

    },
  ];

그런데, 오늘 날짜인 new Date()로 선언한 날짜의 것들은 잘 필터링 되는데.. 

new Date(2023, 4, 10)의 것들은 필터링이 안 되었다. 즉 2023년 4월 10일의 데이터가 조회가 안 되었다.

 

필터링 잘 되는 거랑

필터링이 안 된 거 ㄷㄷ

그.런.데. 나는 아래와 같은 중요한 사실을 몰랐다. 

new Date에서 년, 월, 일로 파라미터를 주어 선언하는 건 맞지만..

월은 날짜 인덱스를 이용하여 사용한다는 것이었다. 

 

아무튼 new Date(2023, 4, 10)은 2023년 5월 10일이란 뜻이다.

2023년 4월 10일을 주고 싶으면 new Date(2023, 3, 10)이라고 적는 것이 맞다. ㅎㅎ;;

 

이것 때문에 한 4시간 낭비한 것 같은데 ㅜㅜ 아 우울해

그렇지만 오류를 계속 찾다가 코드들이 긴 게 거슬려서 깔끔하게 싹 다 컴포넌트 분리시켜줘서 시원하기는 하다 ㅋㅋㅋㅋ