React - 모바일 Pull-to-Refresh 방지하기

React - 모바일 Pull-to-Refresh 방지하기

 

작성일자 : 2025년 05월 25일

---

 

Pull-to-Refresh illustrated by GPT Image Generation

 

 

 

Pull-to-Refresh란?

 

Pull-to-Refresh는 모바일 애플리케이션에서 사용자가 화면을 아래로 끌어당겨 새로 고침을 수행하는 기능입니다. 일반적으로 리스트나 피드를 새로 고침할 때 사용됩니다.

 

---

 

 

Pull-to-Refresh 방지하기

 

PreventPullToRefresh 컴포넌트 생성하기

 

PreventPullToRefresh 컴포넌트는 모바일 환경에서 Pull-to-Refresh 기능을 비활성화하는 역할을 합니다. 이 컴포넌트를 사용하면 터치 이벤트를 감지하여 기본 동작을 방지할 수 있습니다.

// PreventPullToRefresh.js
import React, { useEffect } from 'react';

const PreventPullToRefresh = ({ children }) => {
  useEffect(() => {
    const disablePullToRefresh = (e) => {
      // 터치가 수직 방향일 경우 기본 동작(당겨서 새로고침)을 방지
      if (e.touches.length > 1 || e.touches[0].clientY > 0) {
        e.preventDefault();
      }
    };

    // 이벤트 리스너 등록
    document.addEventListener("touchmove", disablePullToRefresh, { passive: false });

    // 컴포넌트 언마운트 시 이벤트 리스너 제거
    return () => {
      document.removeEventListener("touchmove", disablePullToRefresh);
    };
  }, []);

  return (
    <div style={{ touchAction: 'pan-x' }}>
      {children}
    </div>
  );
};

export default PreventPullToRefresh;

 

---

 

PreventPullToRefresh 컴포넌트 사용하기

 

// App.js
import React from 'react';
import PreventPullToRefresh from './PreventPullToRefresh';

const App = () => {
  return (
    <PreventPullToRefresh>
      <div>
        {/* 나머지 앱 컨포넌트 내용 */}
        <h1>Welcome to My App</h1>
        <p>This content is within a component that disables the pull-to-refresh feature.</p>
      </div>
    </PreventPullToRefresh>
  );
};

export default App;

 

---

https://dev.to/khaled17/how-to-prevent-pull-down-to-refresh-of-mobile-browser-mjp

How to prevent pull-down-to-refresh of mobile browser