[Namoldak] Intersection Observer API 를 사용한 무한스크롤
React 로 무한스크롤 구현하기! Intersection Observer API 를 사용하는 방법?
Intersetction Observer API란?
Intersection Observer API는 뷰포트 내 요소의 교차(intersection) 상태를 관찰하는 API입니다. 뷰포트는 웹 페이지에서 보이는 영역을 말하며, Intersection Observer API를 사용하면 이 영역 내에서 요소들이 어떤 상태인지를 비동기적으로 관찰할 수 있습니다.
Intersection Observer API는 크로스 브라우징을 지원하며, 모바일 기기에서도 정상적으로 작동합니다. 이 API를 이용하여 웹 페이지에서 무한 스크롤, 광고 배너 로딩, 이미지 지연 로딩 등 다양한 용도로 활용할 수 있습니다.
Intersection Observer API는 다음과 같은 메서드와 프로퍼티를 제공합니다.
- IntersectionObserver 생성자: IntersectionObserver 객체를 생성합니다.
- IntersectionObserver.observe(targetElement): 지정한 요소를 IntersectionObserver에 등록하여 교차 상태를 관찰합니다.
- IntersectionObserver.disconnect(): IntersectionObserver에서 등록한 모든 요소의 교차 관찰을 중지합니다.
- IntersectionObserver.unobserve(targetElement): 지정한 요소의 교차 관찰을 중지합니다.
- IntersectionObserverEntry.intersectionRatio: 교차 영역의 비율을 반환합니다.
- IntersectionObserverEntry.isIntersecting: 요소와 뷰포트가 교차하는지 여부를 반환합니다.
IntersectionObserver 생성자는 다음과 같은 옵션을 제공합니다.
- root: 교차를 관찰할 요소의 부모 요소를 지정합니다. 기본값은 브라우저의 뷰포트입니다.
- rootMargin: 교차 영역을 계산할 때, 지정한 마진 값을 고려합니다.
- threshold: 교차 영역의 비율이 지정한 값 이상일 때, 콜백 함수를 호출합니다. 기본값은 0입니다.
무한스크롤 구현 코드
초기값 선언과 함수 부분
// initial state
const [comments, setComments] = useState([]);
const [totalPage, setTotalPage] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const [commentPage, setCommentPage] = useState(0); // 스크롤이 닿았을 때 새롭게 데이터 페이지를 바꿀 state
const pageEnd = useRef(); // 페이지의 마지막 요소(infinite scroll의 탐색 타겟)
const loadMore = () => {
if (commentPage < totalPage) {
setCommentPage((commentPage) => commentPage + 1);
}
if (commentPage === totalPage - 1) {
setIsLoading(false);
}
};
useEffect(() => {
if (isLoading) {
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
loadMore();
}
},
{ threshold: 1 },
);
// 옵져버 탐색 시작
observer.observe(pageEnd.current);
}
}, [isLoading]);return문
<div>
(생략)
{comments?.map((i) => {
return (
<div key={i.id}>
<Comment
commentId={i.id}
comment={i.comment}
nickname={i.nickname}
createdAt={i.createdAt}
comments={comments}
setComments={setComments}
/>
</div>
);
})}
<Target ref={pageEnd} />
</div>깃허브
https://github.com/namoldak/Frontend/blob/main/src/components/Community/Post/PostDetail.jsx
React 에서 Intersection Observer API를 사용하지 않고 무한스크롤을 구현하는 방법은?
1. 스크롤 이벤트와 DOM 높이 비교
무한 스크롤을 구현하는 가장 간단한 방법 중 하나는 스크롤 이벤트를 사용하여 DOM의 높이와 스크롤 위치를 비교하는 것입니다.
import React, { useState, useEffect } from 'react';
function InfiniteScroll() {
const [data, setData] = useState([]);
const [page, setPage] = useState(1);
useEffect(() => {
// 초기 데이터 로드
fetchData();
}, []);
useEffect(() => {
// 스크롤 이벤트 리스너 등록
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const handleScroll = () => {
// 스크롤이 바닥에 닿았을 때 다음 페이지 데이터 로드
if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
fetchData();
}
};
const fetchData = async () => {
// API에서 데이터를 가져와서 data state에 추가
const response = await fetch(`https://example.com/api?page=${page}`);
const newData = await response.json();
setData((prevData) => [...prevData, ...newData]);
setPage((prevPage) => prevPage + 1);
};
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
}
export default InfiniteScroll;위 코드에서 handleScroll 함수는 스크롤 이벤트가 발생할 때마다 호출됩니다. 이 함수는 현재 스크롤 위치와 DOM 높이를 비교하여 스크롤이 바닥에 닿았는지 확인합니다. 스크롤이 바닥에 닿으면 fetchData 함수를 호출하여 다음 페이지 데이터를 가져와서 data state에 추가합니다.
2. button 클릭으로 추가 데이터 가져오기
또 다른 방법은 무한 스크롤 대신 "더 보기" 버튼을 클릭하여 추가 데이터를 가져오는 것입니다.
import React, { useState, useEffect } from 'react';
function InfiniteScroll() {
const [data, setData] = useState([]);
const [page, setPage] = useState(1);
useEffect(() => {
// 초기 데이터 로드
fetchData();
}, []);
const handleLoadMore = () => {
// "더 보기" 버튼 클릭 시 다음 페이지 데이터 로드
fetchData();
setPage((prevPage) => prevPage + 1);
};
const fetchData = async () => {
// API에서 데이터를 가져와서 data state에 추가
const response = await fetch(`https://example.com/api?page=${page}`);
const newData = await response.json();
setData((prevReact 를 쓰지 않고 무한스크롤을 구현하는 방법은?
React를 사용하지 않고 무한 스크롤을 구현하는 방법에는 일반적으로 두 가지 방법이 있습니다.
- 스크롤 이벤트와 DOM 높이 비교
- 스크롤 이벤트를 사용하여 DOM의 높이와 스크롤 위치를 비교하는 방법입니다.
- 스크롤 위치와 DOM 높이를 비교하여 스크롤이 바닥에 닿았는지 확인하고, 바닥에 닿았다면 다음 페이지 데이터를 가져와서 페이지에 추가합니다.
- AJAX 요청과 데이터 렌더링
- AJAX 요청을 사용하여 페이지당 일정한 개수의 데이터를 가져오는 방법입니다.
- 초기 페이지 로드 시 일정한 개수의 데이터를 가져오고, 스크롤이 아래쪽에 가까워질 때마다 추가 데이터를 가져와서 페이지에 추가합니다.
두 방법 모두 JavaScript와 HTML을 사용하여 구현할 수 있습니다. 예를 들어, 첫 번째 방법의 경우 다음과 같은 코드를 사용할 수 있습니다.
// 스크롤 이벤트 리스너 등록
window.addEventListener('scroll', handleScroll);
// 스크롤 이벤트 핸들러
function handleScroll() {
// 스크롤이 바닥에 닿았는지 확인
if (window.innerHeight + window.scrollY === document.body.offsetHeight) {
// 다음 페이지 데이터 가져오기
const data = getNextPageData();
// 가져온 데이터를 페이지에 추가하기
renderData(data);
}
}위 코드에서 window.addEventListener 함수를 사용하여 스크롤 이벤트 리스너를 등록하고, handleScroll 함수에서 스크롤이 바닥에 닿았는지 확인합니다. 바닥에 닿았을 때 getNextPageData 함수를 호출하여 다음 페이지 데이터를 가져오고, renderData 함수를 호출하여 가져온 데이터를 페이지에 추가합니다. 이때 renderData 함수는 가져온 데이터를 HTML 요소로 변환하여 페이지에 추가하는 역할을 합니다