배너 이미지 출처: https://commons.wikimedia.org/wiki/File:React_Native_Logo.png
이번 포스트에서는 React를 사용하여 "페이지 최하단 스크롤 시" 전달 받은 콜백을 실행시키는 useInfiniteScroll hook을 만들어 볼 것입니다.
예를 들어, 많은 양의 목록형 아이템을 페이지에 표시할 때, 최초 n개의 아이템을 먼저 표시한 후 "페이지 최하단 스크롤 시" n개의 아이템을 추가로 표시해야 하는 경우 useInfiniteScroll hook을 사용 할 수 있습니다. 그 외 "페이지 최하단 스크롤 시" 어떠한 로직을 수행해야할 경우에도 사용 할 수 있습니다.
바쁘신 분들은 샌드박스 링크에 방문하여 소스코드를 먼저 살펴봐주세요.
useInfiniteScroll
우선 useInfiniteScroll.js 파일 생성 후 아래 코드를 작성합니다.
import { useEffect } from "react";
function useInfiniteScroll(callback) {
useEffect(
() => {
function scrollBottom() {
// ???
}
// 2. 이벤트 핸들러 등록
window.addEventListener("scroll", scrollBottom);
// 3. 클린업 함수 작성
return () => {
window.removeEventListener("scroll", scrollBottom);
};
},
// 1. 디펜던시 추가
[callback]
);
}
export default useInfiniteScroll;
-
useEffecthook의 디펜던시에 전달 받은callback을 추가합니다. 즉,callback의 참조가 바뀌면useEffecthook이 다시 실행될 수 있도록 합니다. -
addEventListener메소드를 사용하여window객체에 scroll 이벤트 핸들러(scrollBottom)를 등록합니다. -
callback의 참조가 바뀔 때 실행될 클린업 함수를 작성합니다.
다음은 scrollBottom 함수에서 callback을 실행시키는 조건을 작성해보도록 합시다. 우선 "페이지 최하단 스크롤 시"라는 조건을 추가해야하는데, 먼저 아래 코드를 확인해주세요.
import { useEffect } from "react";
function useInfiniteScroll(callback) {
useEffect(() => {
function scrollBottom() {
const {
scrollTop,
clientHeight,
scrollHeight,
} = document.documentElement;
// 페이지 최하단 스크롤 시
if (scrollTop + clientHeight >= scrollHeight) {
// callback을 실행
callback();
}
}
window.addEventListener("scroll", scrollBottom);
return () => {
window.removeEventListener("scroll", scrollBottom);
};
}, [callback]);
}
export default useInfiniteScroll;
위 코드를 보면 "페이지 최하단 스크롤 시"라는 조건을 scrollTop + clientHeight >= scrollHeight으로 판별하는 데, 해당 조건에서 사용하는 각 값에 대해서 알아볼 필요가 있습니다.
먼저 document.documentElement는 HTML 문서의 root element(<html> 요소)를 의미합니다. 즉, 위 예제 코드에서 사용된 scrollTop, clientHeight, scrollHeight은 각각 <html> 요소의 프로퍼티입니다.
Element.scrollTop 프로퍼티는 접근자 프로퍼티(accessor property)로서 참조 시 어떠한 값을 반환하는데, 이 값이 의미하는 것은 "해당 요소가 수직으로 스크롤 된 픽셀 값"입니다. 즉, 위 예제의 경우 <html> 요소가 수직으로 스크롤된 픽셀 값을 의미합니다.
Element.scrollTop
The
Element.scrollTopproperty gets or sets the number of pixels that an element's content is scrolled vertically.출처: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
Element.clientHeight 프로퍼티는 읽기 전용 프로퍼티로서, 요소의 내부 높이(height + padding - height of horizontal scrollbar)를 나타냅니다. 단, <html> 요소의 clientHeight 프로퍼티는 뷰포트의 높이를 나타냅니다.
Element.clientHeight
When
clientHeightis used on the root element (the<html>element), (or on<body>if the document is in quirks mode), the viewport's height (excluding any scrollbar) is returned.출처: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
마지막으로 Element.scrollHeight 프로퍼티는 읽기 전용 프로퍼티로서 요소의 높이를 나타내는데, 이때의 높이는 이미 스크롤되어 화면에 보이지 않는 영역까지 포함하여 계산된 값입니다.
Element.scrollHeight
The
Element.scrollHeightread-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.출처: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
scrollBottom 핸들러에서 사용한 조건을 그림으로 표시하면 아래와 같습니다.
즉, useInfiniteScroll hook은 이미 스크롤된 높이(scrollTop) + 뷰포트 높이(clientHeight)의 값이 스크롤 될 수 있는 높이(scrollHeight)보다 크다면 전달 받은 callback을 실행하는 hook입니다.
이번 포스트는 여기서 마치도록 하겠습니다.
Top comments (0)