인프런 커뮤니티 질문&답변

const listFetcher = async () => {
        const res = await apiClient.get(`/notices`, {
            params: {
                siteKey: sitekey || selectsite,
                keyword: searchData || null,
                page: page,
                size: 5,
                orderOption: sortModel.field || "createAt",
                orderSeq: sortModel.sort || "desc",
            },
        });
        console.log("res.data.payload.notices", res.data.payload.notices);
        return res.data.payload.notices;
    };

    const getKey = (pageIndex, previousPageData) => {
        if (previousPageData && !previousPageData.length) return null;

        return {
            url: `/notices?${pageIndex}`,
        };
    };

    const {
        data,
        error,
        size: page,
        setSize: setPage,
        isValidating,
        mutate,
    } = useSWRInfinite(getKey, listFetcher);
    const isInitialLoading = !data && !error;
    const posts = data ? [].concat(...data) : [];

    const [observedPost, setObservedPost] = useState("");

    useEffect(() => {
        // 포스트가 없다면 return
        if (!posts || posts.length === 0) return;
        // posts 배열안에 마지막 post에 id를 가져옵니다.
        const id = posts[posts.length - 1].noticeNo;
        // posts 배열에 post가 추가돼서 마지막 post가 바뀌었다면
        // 바뀐 post 중 마지막post를 obsevedPost로
        if (id !== observedPost) {
            setObservedPost(id);
            observeElement(document.getElementById(id));
        }
    }, [posts]);

    const observeElement = (element) => {
        if (!element) return;
        // 브라우저 뷰포트(ViewPort)와 설정한 요소(Element)의 교차점을 관찰
        const observer = new IntersectionObserver(
            // entries는 IntersectionObserverEntry 인스턴스의 배열
            (entries) => {
                // isIntersecting: 관찰 대상의 교차 상태(Boolean)
                if (entries[0].isIntersecting === true) {
                    console.log("마지막 포스트에 왔습니다.");
                    setPage(page + 1);
                    observer.unobserve(element);
                }
            },
            { threshold: 0.5 }
        );
        // 대상 요소의 관찰을 시작
        observer.observe(element);
    };

useSWRInfinite 포스트 작성중인데, 위와 같이 처리했더니 맨끝 스크롤 이동시 api 호출이 더이상 되지 않고 있는데 이유를 알고 싶습니다!