댓글 기능을 만들었다.

프로젝트를 진행하면서 댓글은 기본 중에 기본 기능이지 않을까 생각한다. 어떤 기능을 만들던, 심화과정을 밟으면 서비스의 질이 엄청나게 올라간다는 것을 알았다.

물론 내가 엄청나게 깊게 한 것은 아니다. 그럴 시간도 내 능력도 부족했다.

우리는 리액트 쿼리를 이용해서 서버 상태를 관리하기 때문에 데이터 패칭에 용이함이 있엇다.

멋진 팀원의 도움을 받아 (없었으면 아마 못 했을 것 같다.) 기본적인 쿼리 사용법을 배웠다.

리액트 쿼리?

프로젝트 시작 전 상태관리에 대해 얘기를 나눌 때 처음 들어본 개념이라서 약간은 두려움이 있었다. 물론 개발 초기에 쓸 일이 많지 않아서, 거의 사용을 하지 않아서 막상 사용하려니 좀 어색했다.

기본 원리

리액트 쿼리는 캐시를 이용해서 데이터를 저장한다. 캐싱한 데이터를 어디서나 마음대로 가져다 쓸 수 있고, 어디서나 업데이트가 가능하다. 캐싱한 데이터를 업데이트 한다면 당연히 다시 패치를 받아와야 하는데 이를 굉장히 간단하게 지원을 한다. 그럼 댓글 서비스에 어떻게 사용을 했는지 살펴보자

댓글 데이터를 받아보자

일단 리액트 쿼리를 사용하려면 provider를 루트 컴포넌트에 감싸줘야한다.

<QueryClientProvider client={queryClient}>
  <App />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

그리고 편의성을 위해 커스텀 훅을 만들어 편안하게 get요청을 보내보자.

export const useGetCommentList = (postId) => {
  const fetchCommentList = async ({ pageParam = 1 }) => {
    const res = await get(`posts/${postId}/comments?page=${pageParam}&limit=6`);
    const { comments, isLast } = res.data;
    return { comments, nextPage: pageParam + 1, isLast };
  };

  return useInfiniteQuery(["comments", postId], fetchCommentList, {
    staleTime: 50000,
    cacheTime: 120000,
    getNextPageParam: (lastPage) =>
      !lastPage.isLast ? lastPage.nextPage : undefined,
  });
};

단순하게 데이터를 받아올 때는 useInfiniteQuery를 사용하지는 않는다. 댓글 데이터 패치를 무한 스크롤로 구현하기 위해 리액트 쿼리에서 제공하는 방식을 사용했다.

여기서 중요한 점은 key이다. key는 중요한게 맞는데 그런 의미가 아니라, ["comments", postId]에 주목을 해야한다.

이제 데이터를 받아올 때 저 key를 이용해서 내가 원하는 데이터를 가져올 수 있다. 여러 데이터를 관리한다고 하더라도 key를 이용해서 각자 다르게 관리가 가능하다.

staleTime은 데이터가 한 번 fetch되고 나서 staleTime이 지나지 않았으면 unmounnt 후 mount 되어도 fetch가 일어나지 않는다.

cacheTime은 데이터가 캐싱된 상태로 있는 시간을 의미한다. 해당 시간이 지나면 가비지 컬렉터에 수집되어서 cancel이 일어난다.

이제 데이터를 받았으니 해당 데이터를 이용해보자

import { useGetCommentList } from "queries/commentQuery";

const { data, status, fetchNextPage, isFetchingNextPage } =
    useGetCommentList(postId);

끝이다. 페이지네이션을 구현하기 때문에 data를 찍어보면 페이지에 뎃글 데이터가 포함되어서 온다. 그럼 나는 이걸 가지고 무한 스크롤을 구현해서 댓글을 예쁘게 보여주면 된다.

다음은

post와 대댓글 수정 삭제는 2탄에서 더 깊은 공부로 돌아오겠다!