[Next.js14 프로젝트] 무한스크롤 구현하기

카카오 API 이용한 무한스크롤 구현하기

구현한 모습은 아래와 같다.
스크롤이 교차 지점에 닿으면 그 다음 페이지를 불러온다. 그리고 다음 페이지를 불러올때마다 지도도 지역 중심으로 움직이는 걸 볼 수 있다.

시작하기

카카오 API 를 사용해 음식점 리스트를 불러오는 코드를 구현했다.
keywordSearch 함수를 이용하면 콜백함수 인자로 result, status, pagination 정보를 내려준다.

const searchKeyword = (keyword : string) => {
	const { kakao } = window;
    if(!map || !kakao) return;
    
    const ps = new kakao.maps.services.Places();
    
    ps.keywordSearch(keyword, (result, status, pagination) => {
      if(status === kakao.maps.Services.Status.OK) {
        console.log(result)
        console.log(pagination)
      }
   },
   {
      category_group_code : 'FD6',
      useMapBounds : true
   }
 );
}

pagination 값을 살펴보면 아래와 같다.
한번에 15개씩 데이터를 받아오고, 데이터는 총 45개만 제공해준다.

current: 1
first: 1
gotoFirst: ƒ ()
gotoLast: ƒ ()
gotoPage: ƒ (a)
hasNextPage: true
hasPrevPage: false
last: 3
nextPage: ƒ ()
perPage: 15
prevPage: ƒ ()
totalCount: 45

Intersection Observer API

무한스크롤을 구현하기 위해서 Intersection Observer API 를 사용했다.

Intersection Observer API 에 대해서 검색해보면 글이 많은데, 글만 보고서는 이해가 어려웠다.
그래서 일단 따라서 코드를 작성해봤는데 오히려 작성하면서 동작 원리를 이해하게 되었다.

1) IntersectionObserver 인스턴스 생성

• new IntersectionObserver()를 통해 인스턴스를 생성한다.
  생성자는 2개의 인수(callback, options) 를 가진다.

const observer = new IntersectionObserver(handleObserver, { threshold: 0 });

• observer.observe(currentEl) 로 관찰할 대상(요소) 를 등록한다.

const currentEl = observerEl.current;
if (currentEl) {
observer.observe(currentEl);
}

• 즉, currentEl 요소가 다른 요소나 브라우저 뷰포트와 교차하면 인수로 넣은 callback 함수가 실행된다.

• 마지막으로 useEffect 의 cleanup 함수를 이용해 요소에 대한 관찰을 중단하도록 했다.

  useEffect(() => {
      const observer = new IntersectionObserver(handleObserver, { threshold: 0 });
      const currentEl = observerEl.current;
      if (currentEl) {
          observer.observe(currentEl);
      }
      return () => {
          if (currentEl) {
              observer.unobserve(currentEl);
          }
      };
  }, [handleObserver]);

2) callback 함수 만들기

currentEl 요소가 다른 요소나 브라우저 뷰포트와 교차하면 인수로 넣은 callback 함수가 실행된다고 했다.
여기서 나는 handleObserver 함수를 생성해 콜백함수 인수로 넣어줬다.

    const handleObserver = useCallback(
        (entries: IntersectionObserverEntry[]) => {
            const target = entries[0];
            if (target.isIntersecting && pagination?.hasNextPage) {
                pagination.gotoPage(pagination.current + 1);
            }
        },
        [pagination]
    );

• IntersectionObserverEntry 배열을 받아서 첫번째 항목인 entries[0] 을 받아와 target 변수에 넣어준다.

• 해당 항목이 교차 상태이고 (target.isIntersecting 이 true 일때) , 그리고 다음 페이지가 존재하는 경우 gotoPage 함수를 통해 다음 페이지로 이동시킨다.

3) 전체 코드

const Card = () => {
    const observerEl = useRef<HTMLDivElement>(null);
    const { pagination, resData } = useMap();

    const handleObserver = useCallback(
        (entries: IntersectionObserverEntry[]) => {
            const target = entries[0];
            if (target.isIntersecting && pagination?.hasNextPage) {
                pagination.gotoPage(pagination.current + 1);
            }
        },
        [pagination]
    );

    useEffect(() => {
        const observer = new IntersectionObserver(handleObserver, { threshold: 0 });
        const currentEl = observerEl.current;
        if (currentEl) {
            observer.observe(currentEl);
        }
        return () => {
            if (currentEl) {
                observer.unobserve(currentEl);
            }
        };
    }, [handleObserver]);

    return (
        <List>
            {resData.map((res: any) => (
                <ListBox
                    onClick={() => {
                        router.push(`/${res.id}`);
                    }}
                    key={res.id}
                    top={
                        <div className={styles.title}>
                            <Text typography="t4">{res.place_name}</Text>
                            <Text typography="st3">{res.road_address_name}</Text>
                        </div>
                    }
                    bottom={
                        <div>
                            <Text typography="st3">{res.phone}</Text>
                        </div>
                    }
                />
            ))}
            <div ref={observerEl} />
        </List>
    );
};

export default Card;

useKeyword hook

마지막으로 useKeyword 훅을 수정해줬다.

• 검색 할때마다 resData 배열이 초기화가 되어야 하므로 setState 함수를 이용해 초기화 작업을 수행해준다.

 if (resData.length > 0) {
      setResData([]);
      setPagination(null);
  }

• 페이지가 바뀌어도 이전 페이지의 데이터도 보여주기 위해 아래와 같이 구현했다.

setResData((prev) => [...prev, ...data]);

const searchKeyword = useCallback(
  (keyword: string) => {
      const { kakao } = window;
      if (!map || !kakao) return;
       const ps = new kakao.maps.services.Places();

// resData.length 배열 값이 있으면 초기화 작업을 해줘야한다. 

      if (resData.length > 0) {
          setResData([]);
          setPagination(null);
      }

      ps.keywordSearch(
          keyword,
          (data, status, pagination: any) => {
              if (status === kakao.maps.services.Status.OK) {
                  const bounds = new kakao.maps.LatLngBounds();
        
                  let markers = [];

                  for (let i = 0; i < data.length; i++) {
                  // @ts-ignore
                  markers.push({
                     position: {
                         lat: data[i].y,
                         lng: data[i].x,
                         },
                                content: data[i].place_name,
                            });

                            // @ts-ignore
                            bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
                        }

                        setMarkers(markers);

                        setPagination(pagination);

                        // 페이지가 바뀌어도 기존 데이터를 모두 보여주기 위해 아래와 같이 작성
                        setResData((prev) => [...prev, ...data]);

                        map.setBounds(bounds);
                    }
                },
                {
                    category_group_code: 'FD6',
                    useMapBounds: true,
                }
            );
        },
        [setPagination, setResData, resData, setMarkers, map]
    );

    return { searchKeyword };
};

useInfiniteScoll hook 으로 만들기

컴포넌트 안에 Intersection Observer API 로직이 함께 작성되어 이 로직을 훅으로 빼기로 했다.

콜백함수와 다음 페이지가 있는지 여부를 확인할 수 있는 hasNextPage 를 인자로 받는 함수로 관찰 요소를 설정할 수 있는 observeEl 과 isLoading 을 반환한다.

import { useState, useEffect, useRef, useCallback } from 'react';

type InfiniteScrollType = {
    callbackFn: () => void;
    hasNextPage: boolean;
};

export const useInfiniteScroll = ({ callbackFn, hasNextPage }: InfiniteScrollType) => {
    const [isLoading, setIsLoading] = useState<boolean>(false);
    const observerEl = useRef<HTMLDivElement>(null);

    const handleObserver = useCallback(
        (entries: IntersectionObserverEntry[]) => {
            const target = entries[0];
            if (target.isIntersecting && !isLoading && hasNextPage) {
                setIsLoading(true);
                callbackFn();
                setIsLoading(false);
            }
        },
        [callbackFn, isLoading, hasNextPage]
    );

    useEffect(() => {
        const observer = new IntersectionObserver(handleObserver, { threshold: 0 });
        const currentEl = observerEl.current;
        if (currentEl) {
            observer.observe(currentEl);
        }
        return () => {
            if (currentEl) {
                observer.unobserve(currentEl);
            }
        };
    }, [handleObserver]);

    return { observerEl, isLoading };
};

useInfiniteScroll 훅을 사용해 아래와 같이 수정했다.

const Card = () => {

  const { pagination, resData } = useMap();  
  
    const fetchNextPage = () => {
        pagination?.gotoPage(pagination.current + 1);
    };
    
   onst { observerEl } = useInfiniteScroll({ callbackFn: fetchNextPage, hasNextPage: pagination?.hasNextPage! });

    return (
        <List>
            {resData.map((res: any) => (
                <ListBox
                    onClick={() => {
                        router.push(`/${res.id}`);
                    }}
                    key={res.id}
                    top={
                        <div className={styles.title}>
                            <Text typography="t4">{res.place_name}</Text>
                            <Text typography="st3">{res.road_address_name}</Text>
                        </div>
                    }
                    bottom={
                        <div>
                            <Text typography="st3">{res.phone}</Text>
                        </div>
                    }
                />
            ))}
            <div ref={observerEl} />
        </List>
    );
};

export default Card;

완성본

스크롤을 끝까지 내려서 교차 지점에 닿으면 gotoPage 함수가 실행되어 새로운 데이터가 불러와진다.
이렇게 kakao API 를 활용한 무한스크롤을 구현하는 방법에 대해 정리해봤다.