화면을 아래로 당겨 페이지를 새로 고침하고 최신 데이터를 받아와야 하는 요구 사항이 있을 때, JavaScript, XMLHttpRequest(XHR), 그리고 터치 이벤트를 조합하면 이를 손쉽게 구현할 수 있습니다.
당겨서 새로고침(Pull-to-Refresh)의 동작 원리
당겨서 새로고침은 본질적으로 AJAX에서 XHR 요청을 트리거하는 동작입니다. 사용자가 화면을 아래로 당기면 서버에 최신 데이터를 요청하고, 응답받은 데이터를 원하는 DOM 요소에 추가하는 방식으로 작동합니다.
구현 방법
1. iscroll 같은 스크롤 하이재킹 라이브러리 활용
당겨서 새로고침은 iscroll처럼 브라우저의 기본 JavaScript 스크롤 메커니즘을 가로채는(하이재킹하는) 방식으로 구현할 수 있습니다. 실제로 트위터(Twitter)도 초기 모바일 웹 버전에서 iscroll을 활용해 당겨서 새로고침 기능을 제공한 대표적인 사례입니다.
2. overflow: scroll 컴포넌트용 새로고침 핸들러 직접 작성
또 다른 방법은 overflow: scroll이 적용된 컴포넌트를 위한 전용 새로고침 핸들러를 직접 만드는 것입니다. 이 방식은 외부 라이브러리 없이 순수 JavaScript만으로 가볍게 구현할 수 있다는 장점이 있습니다.
핸들러 인터페이스 예시
아래 코드는 당겨서 새로고침 핸들러의 인터페이스가 어떤 형태인지 보여주는 예시입니다.
var PullToRefresh = function(callback, wrapper, instructionsText) {
// DOM 요소를 생성하여 콘텐츠 래퍼(content wrapper) 앞에 추가합니다.
//
// <div class="mainWrapper" style="overflow: scroll; height: 600px;">
<div class="pullToReloadWrapper"></div>
<div class="contentWrapper"></div>
// </div>
// 위와 같은 마크업 구조가 됩니다.
//
// mainWrapper의 높이가 contentWrapper의 높이보다 크면,
// mainWrapper의 높이를 contentWrapper의 높이에 맞춥니다.
//
// mainWrapper를 스크롤합니다.
// initializeEvents()를 호출하여 이벤트를 초기화합니다.
};핵심 정리
- DOM 구성: mainWrapper 안에 새로고침 영역(pullToReloadWrapper)과 콘텐츠 영역(contentWrapper)을 배치합니다.
- 높이 보정: 래퍼 간 높이 불일치를 자동으로 맞춰 스크롤 동작을 일관되게 유지합니다.
- 이벤트 처리: touchstart, touchmove, touchend 등 터치 이벤트를 초기화하여 당김 동작을 감지합니다.
- 데이터 갱신: 당김이 감지되면 콜백(callback)을 통해 XHR 요청을 실행하고, 새 데이터를 화면에 반영합니다.