데이터 날짜별로 분류하기

👆 위와 같이 게시글 데이터를 날짜별로 분류해 보여주고자 한다.

diary 객체들을 담은 배열 diarys이다.

const diarys = [
  { diaryId: 1, userId:253 content: "ㅇㅎㅇ", createdAt: "2023-01-04T16:04:55.000Z" },
  { diaryId: 2, userId: 253, content: "ㅇㅎㅇ", createdAt: "2023-01-04T16:04:56.000Z" },
  { diaryId: 3, userId: 253, content: "ㅇㅎㅇ", createdAt: "2023-01-04T16:04:57.000Z" },
  { diaryId: 4, userId: 253, content: "ㅇㅎㅇ", createdAt: "2023-01-05T16:04:56.000Z" },
  { diaryId: 5, userId: 253, content: "ㅇㅎㅇ", createdAt: "2023-01-05T16:04:57.000Z" },
  { diaryId: 6, userId: 253, content: "ㅇㅎㅇ", createdAt: "2023-01-05T16:04:56.000Z" },
  { diaryId: 7, userId: 253, content: "ㅇㅎㅇ", createdAt: "2023-01-06T16:04:57.000Z" },
  { diaryId: 8, userId: 253, content: "ㅇㅎㅇ", createdAt: "2023-01-06T16:04:58.000Z" },
];

dirays를 인자로 받아 날짜별로 분류해주는 함수 makeSections를 생성한다.

import { IDiary } from "./../allTypes/myStudy";
import dayjs from "dayjs";

interface ISection {
  [key: string]: IDiary[];
}

export default function makeSection(diaryList: IDiary[]) {
  const sections: ISection = {};

  diaryList.forEach((diary) => {
    // "2022-12-02T15:49:43.122Z"를 2022.12.02로 바꿔줌
    const monthDate = dayjs(diary.createdAt)
					.subtract(9, "hour")
      				.format("YYYY.MM.DD");
    // sections 객체에 2022-12-02라는 키값이 존재한다면 push 아니면 키를 생성하고 값을 지정
    if (sections[monthDate]) {
      sections[monthDate].push(diary);
    } else {
      sections[monthDate] = [diary];
    }
  });
  return sections;
}

1. 날짜별로 분류해주기 위해 sections 를 생성한다.
2. 전달 받은 배열 diaryList 에 반복문을 돌려 dayjs를 통해 원하는 포맷으로 변경해준다.
   • subtract(9, "hour") 를 하지 않았을 때는 기존 시간에 9시간이 더해져 원하지 않는 결과 값이 나오기에 9시간을 빼주었다.
   • format("YYYY.MM.DD") 을 통해 연, 월, 일을 추출해 원하는 string 값으로 변환시켰다.
3. sections[monthDate] 값이 존재한다면 diary 값을 sections[monthDate]에 push 해준다.
   값이 존재하지 않는다면 monthDate 키로 하는 새로운 배열을 할당해준다.
4. 이렇게 반복문이 끝나면 sections 객체를 리턴한다.

✅ 아래와 같이 날짜별로 배열을 분리해주었다.

import makeSection from "@utils/makeSection";
import { useMemo } from "react";

const diaryList = () => {
  // 채팅 날짜별로 데이터를 묶어주는 함수
  const DiarySections = useMemo(() => {
    if (!diarys) return;
    return makeSection(diarys || []);
  }, [diarys]);

  return (
    <div>
      {Object.entries(diarySections || {})?.map(([day, diarys]) => (
        <ul className="flex flex-col border p-4">
          <span className="flex-center mb-4 w-32 rounded-lg bg-red-200 p-2">
            {day}
          </span>
          {diarys?.map((diary) => (
            <li>{diary.content}</li>
          ))}
        </ul>
      ))}
    </div>
  );
};

1. diaryList는 diarys의 값이 변경될 때마다 날짜별 분류를 해서 리턴한다.

2. 현재 diaryList 는 { ”날짜” : [ ] } 형태이기 때문에 Object.entries를 통해 배열 형태로 만들어주고 거기서 날짜와 배열을 추출해 배열은 한번 더 map 을 사용해 뿌려준다.

👇 아래와 같이 날짜별로 분류되어 화면에 나타나는 것을 확인할 수 있다.