pull to refresh

React에서 Pull to Refresh(당겨서 새로고침) 기능은 모바일 웹앱이나 하이브리드 앱에서 자주 쓰이는 UI 패턴이에요.
보통 사용자가 화면을 위로 스크롤할 수 없을 때, 화면을 아래로 끌면 데이터를 새로 불러오는 동작을 수행합니다.

✅ 구현 방법은 크게 3가지입니다

1. 라이브러리 사용 (가장 간단하고 안정적)
대표적으로 다음과 같은 라이브러리를 사용합니다.

`react-pull-to-refresh` 가장 많이 쓰이는 경량 라이브러리입니다.

import React from 'react';
import PullToRefresh from 'react-pull-to-refresh';

function App() {
  const handleRefresh = async () => {
    // 새로고침 동작 (예: 서버 데이터 다시 불러오기)
    await new Promise(resolve => setTimeout(resolve, 1500));
    alert('새로고침 완료!');
  };

  return (
    <PullToRefresh onRefresh={handleRefresh}>
      <div
        style={{
          height: '100vh',
          overflow: 'auto',
          padding: 20,
        }}
      >
        <h2>Pull down to refresh 👇</h2>
        <p>스크롤을 아래로 당겨보세요!</p>
      </div>
    </PullToRefresh>
  );
}

export default App;

 

2. React + touchstart, touchmove, touchend로 직접 구현
조금 더 세밀하게 제어하고 싶다면 터치 이벤트를 직접 처리할 수 있습니다.

 

import React, { useState, useRef } from 'react';

function CustomPullToRefresh({ onRefresh, children }) {
  const [pulling, setPulling] = useState(false);
  const startY = useRef(0);
  const threshold = 70; // 새로고침 인식 거리

  const handleTouchStart = (e) => {
    if (window.scrollY === 0) {
      startY.current = e.touches[0].clientY;
    }
  };

  const handleTouchMove = (e) => {
    const distance = e.touches[0].clientY - startY.current;

    if (distance > threshold) {
      setPulling(true);
    }
  };

  const handleTouchEnd = async () => {
    if (pulling) {
      await onRefresh();
    }

    setPulling(false);
  };

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      style={{
        transition: 'transform 0.2s',
        transform: pulling ? 'translateY(50px)' : 'none',
      }}
    >
      {pulling && (
        <div style={{ textAlign: 'center' }}>
          🔄 새로고침 중...
        </div>
      )}

      {children}
    </div>
  );
}

export default function App() {
  const refresh = () =>
    new Promise((resolve) =>
      setTimeout(
        () => resolve(alert('데이터 새로고침 완료!')),
        1000
      )
    );

  return (
    <CustomPullToRefresh onRefresh={refresh}>
      <div style={{ padding: 20 }}>
        <h2>커스텀 Pull To Refresh</h2>
        <p>손가락으로 아래로 당겨보세요.</p>
      </div>
    </CustomPullToRefresh>
  );
}