From cf4328615c06943301cd582185987fa602f9aff3 Mon Sep 17 00:00:00 2001 From: Woojiseok Date: Wed, 17 Jul 2024 22:22:18 +0900 Subject: [PATCH] =?UTF-8?q?FE-42=F0=9F=92=A1=20=EC=A3=BC=EC=84=9D=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/epigram/Comment/CommentList.tsx | 2 ++ src/hooks/useEpigramCommentsQueryHook.ts | 1 + 2 files changed, 3 insertions(+) diff --git a/src/components/epigram/Comment/CommentList.tsx b/src/components/epigram/Comment/CommentList.tsx index 9d06bd9c..57908c58 100644 --- a/src/components/epigram/Comment/CommentList.tsx +++ b/src/components/epigram/Comment/CommentList.tsx @@ -10,6 +10,7 @@ function CommentList({ epigramId, currentUserId }: EpigramCommentProps) { const observerRef = useRef(null); const lastCommentRef = useRef(null); + // NOTE: Observer 콜백: 마지막 요소가 화면에 보이면 다음 페이지(댓글 최대3개를 묶어 1페이지 취급) 로드 const handleObserver = useCallback( (entries: IntersectionObserverEntry[]) => { const [target] = entries; @@ -34,6 +35,7 @@ function CommentList({ epigramId, currentUserId }: EpigramCommentProps) { } return () => { + // NOTE: effect가 실행되기전에 호출해서 메모리 누수를 방지해준다고 함 if (observerRef.current) { observerRef.current.disconnect(); } diff --git a/src/hooks/useEpigramCommentsQueryHook.ts b/src/hooks/useEpigramCommentsQueryHook.ts index 9c7a34a5..90202f99 100644 --- a/src/hooks/useEpigramCommentsQueryHook.ts +++ b/src/hooks/useEpigramCommentsQueryHook.ts @@ -3,6 +3,7 @@ import { CommentResponseType } from '@/schema/comment'; import getEpigramComments from '@/apis/epigramComment'; const useEpigramCommentsQuery = (epigramId: number) => + // NOTE: 순서대로 API응답타입, 에러타입, 반환되는데이터타입, 쿼리 키 타입, 페이지 파라미터의 타입 useInfiniteQuery, [string, number], number | undefined>({ queryKey: ['epigramComments', epigramId], queryFn: ({ pageParam }) => getEpigramComments({ id: epigramId, limit: 3, cursor: pageParam }),