ReactQuery로 받은 데이터를 특정 기준으로 묶기

서론

Til 쓰기 프로젝트 1일차
블로그 포스트로 재밌었던 내용을 조금 정리해놓으면 좋을 것 같다.
최근에 Til을 너무 안쓰기도 했구.

본론

구현한 로직은 post데이터의 createdAt을 날짜 데이터로 받을건데,
같은 날짜라면 묶어주는 로직.
참고한 링크

const { data, error, isError, isLoading } = useQuery(["posts"], () =>
    diaryApi.get(diaryId)
  );

ReactQuery 로 데이터를 받는다.
diaryId를 useParams로 받아 API 명세서에 맞추어 get 요청을 보내는 로직.

우선 객체를 하나 만들어준다.

  let filtedPosts = {};

객체에 key, value를 넣어줄건데
key는 날짜,
value는 같은 날짜를 갖는 데이터들의 배열로 구성된다.

if (!isLoading) {
    data.forEach((item) => {
      const temp = item.createdAt.slice(0, 10);
      if (filtedPosts[temp]) {
        filtedPosts[temp].push(item);
      } else {
        filtedPosts[temp] = [item];
      }
    });
  }

로딩이 끝나면
useQuery로 받은 data 배열에 forEach 반복문을 돌린다.
createdAt이 2023-01-25T00:00:00.000Z
이런식으로 구성되어 있지만 날짜 데이터만 필요하므로 slice 메소드로 잘라준다.
만약, filtedPosts object에 key 값이 없다면
날짜를 이름으로 갖는 key 값에 data를 넣어 새로운 key, value를 만들어준다.
있다면 push.

{Object.keys(filtedPosts).map((date, n) => {
            return (
              <div key={`dateFilter${n}`}>
                <h2>{date}</h2>
                {filtedPosts[date].map((post, n) => {
                  return <DiaryCard key={`postData${n}`} postData={post} />;
                })}
              </div>
            );
          })}

그리고 객체를 배열로 만들어주기 위해서 Object.keys 메소드를 사용한다.
Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는
열거할 수 있는 배열로 반환한다.
map 로직은 날짜로 구성된 key 값의 갯수만큼 반복되며,
첫번째 파라미터는 key값인 날짜를 반환한다.
h2 태그로 해당 날짜를 표시.
추가적으로 filtedPosts 내부의 값들도 mapping 해주기 위해서
filtedPost Object에 날짜를 key 값으로 갖는 배열들을 map 메소드를 통해 생성해준다.

결론

코딩 테스트가 생각나고 재밌고 좋았는데,
반복문을 두번 돌리는 로직이니까 최적화 측면에서 그다지 좋지 않을 것 같기도 하다.
무한 스크롤을 어떻게 구현할지가 관건이다.
서버에 날짜별로 저장이 되어 있을 테니까 받아올 때는 문제가 없으려나 ?