[오픈소스][React] react-custom-swipe

npm

모바일 앱을 그대로 웹으로 옮기면서 좌우 스와이프를 통한 인피니티 스크롤을 구현해야했다. 관련해서 여러 제약 조건들을 충족 시켜주는 오픈소스 라이브러리를 찾을 수 없어서 스와이프 기능을 분석하고 하드코딩으로 개발을 하였는데 해당 기능에 흥미를 느껴서 오픈소스로 개발해서 정리를 해보고 싶은 생각으로 개발 해보았다.

 

개인적으로 찾아본 결과로는 기존 웹사이트나 관련 오픈소스의 경우 스와이프에서 레이지로딩이나 페이지네이션을 지원하는 케이스를 발견하지 못했다.(핀터레스트 등)

 

보통 스와이프 기능이라고 부르는 스와이프 모션과 플립 모션을 감지하여서 데스크탑과 모바일에서 스와이프 기능을 제공해준다. 또 내부 아이템들이 페이지네이션처럼 비동기적으로 추가되어도 index 쿼리스트링을 통해서 데이터(item)의 index를 기억하기에 페이지 전환이나 리렌더링에 의한 state 초기화에서 벗어난다.

 

개발 환경은 lerna와 yarn을 통해서 모노레포를 구축했고 패키지와 그 패키지를 간단히 보여줄 demo(기존 웹팩 템플릿 활용)두 패키지로 나누고 react와 typescript를 지원한다.

 

기본적으로 리액트 컴포넌트를 통해서 제공되고, 필요하다면 이벤트만 기존 UI에 추가하기 쉽도록 useSwipe라는 커스텀 훅을 제공한다.

import React from 'react';
import ReactSwipe from 'react-custom-swipe';

const App = () => {
  return (
    <div>
      <h1>Component Demo</h1>
      <ReactSwipe
        item={[1, 2, 3, 4, 5, <div>item</div>, <img src={'src'} alt={'src'} />]}
        itemProps={{ style: { border: '1px solid', minHeight: '360px' } }}
      />
    </div>
  );
};

import React, { createRef } from 'react';
import { useSwipe } from 'react-custom-swipe';

const App = () => {
  const ref = createRef<HTMLUListElement>();

  return (
    <div>
      <h1>Hook Demo</h1>
      <div
        className='swipe-container'
        style={{
          position: 'relative',
          display: 'flex',
          padding: 0,
          overflow: 'hidden',
          zIndex: 1,
        }}>
        <ul
          className='swipe-wrap'
          style={{
            position: 'relative',
            zIndex: 1,
            display: 'flex',
            width: '100%',
            height: '100%',
            margin: '0 auto',
            padding: 0,
            listStyle: 'none',
            transitionProperty: 'transform',
            boxSizing: 'content-box',
          }}
          ref={ref}
          {...useSwipe(ref, item.length)}>
          {item.map((item, key) => {
            return (
              <li
                key={key}
                className='swipe-item'
                style={{
                  position: 'relative',
                  flexShrink: 0,
                  width: '100%',
                  height: '100%',
                  textAlign: 'center',
                }}>
                {item}
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};

관련링크

https://www.npmjs.com/package/react-custom-swipe

react-custom-swipe

https://github.com/yoonjonglyu/react-custom-swipe

GitHub - yoonjonglyu/react-custom-swipe: react custom swipe as component and hook.