React에서 무한스크롤을 돕는 InfiniteScroll 컴포넌트 만들기

// 첫번째 예시
import { InfiniteScroll, LoadingSpinner, FeedItem } from "components"

const Feeds = () => {
	const {
		data: feedInfiniteData,
		hasNextPage,
		fetchNextPage,
	} = useGetAllFeeds() // ReactQuery useInfiniteQuery hook

	return (
		<InfiniteScroll
			loadMore={fetchNextPage}
			hasMore={hasNextPage}
			loader={<LoadingSpinner />}
		>
			<div>
				{feedInfiniteData?.pages.map(page =>
					page?.data.map(feedInfo => (
						<li key={feedInfo.cycleDetailId}>
							<FeedItem {...feedInfo} />
						</li>
					))
				)}
			</div>
		</InfiniteScroll>
	)
}

// 두번째 예시
import { InfiniteScroll, LoadingMessage, CardBox } from "components"

export const Cards = () => {
	const {
		data: myChallengeInfiniteData,
		hasNextPage,
		fetchNextPage,
	} = useGetMyChallenges() // ReactQuery useInfiniteQuery hook

	return (
		<InfiniteScroll
			loadMore={fetchNextPage}
			hasMore={hasNextPage}
			loader={<LoadingMessage />}
		>
			<div>
				{myChallengeInfiniteData?.pages.map(page =>
					page?.data?.map(challenge => (
						<CardBox key={challenge.challengeId} {...challenge} />
					))
				)}
			</div>
		</InfiniteScroll>
	)
}

// InfiniteScroll.tsx 전체 코드

import { RefObject, useMemo, useRef, PropsWithChildren, ReactNode } from "react"
import styled from "styled-components"

import useIntersect, { OnIntersect } from "hooks/useIntersect" // 아래에 해당 hook 코드도 있다.

type InfiniteScrollProps = {
	loadMore: () => void
	hasMore?: boolean
	loader?: ReactNode
	threshold?: number
}

export const InfiniteScroll = ({
	children,
	loadMore,
	hasMore,
	loader,
	threshold = 0.5,
}: PropsWithChildren<InfiniteScrollProps>) => {
	const rootRef = useRef() as RefObject<HTMLDivElement>

	const onIntersect: OnIntersect = (entry, observer) => {
		if (hasMore) {
			loadMore()
		}
		observer.unobserve(entry.target)
	}
	const options = useMemo(() => ({ root: rootRef.current, threshold }), [])

	const targetRef = useIntersect<HTMLDivElement>(onIntersect, options)

	return (
		<Wrapper ref={rootRef} flexDirection="column">
			{children}
			<div ref={targetRef} />
			{isFetching && loader}
		</Wrapper>
	)
}

const Wrapper = styled.div`
	display: flex;
	width: 100%;
`

// useIntersectRef.ts 전체 코드

import { useRef, useEffect, useCallback } from "react"

export type OnIntersect = (
	entry: IntersectionObserverEntry,
	observer: IntersectionObserver
) => void

const useIntersectRef = <T extends HTMLElement>(
	onIntersect: OnIntersect,
	options: IntersectionObserverInit
) => {
	const ref = useRef<T>(null)
	const callback = useCallback<IntersectionObserverCallback>(
		(entries, observer) => {
			entries.forEach(entry => {
				if (entry.isIntersecting) {
					onIntersect(entry, observer)
				}
			})
		},
		[onIntersect]
	)

	useEffect(() => {
		if (!ref.current) {
			return
		}

		const observer = new IntersectionObserver(callback, options)
		observer.observe(ref.current)

		return () => {
			observer.disconnect()
		}
	}, [callback])

	return ref
}

export default useIntersectRef

const observer = new IntersectionObserver(callback, options)
observer.observe(ref.current)

// callback의 호출시그니처
interface IntersectionObserverCallback {
	(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void
}

const callback = useCallback<IntersectionObserverCallback>(
	(entries, observer) => {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				onIntersect(entry, observer)
			}
		})
	},
	[onIntersect]
)

const onIntersect: OnIntersect = (entry, observer) => {
	if (hasMore) {
		loadMore()
	}
	observer.unobserve(entry.target)
}