👆 54. React Native 스와이프 제스처 구현 전략 — Swipeable, PanGesture, BottomSheet까지

---

모바일 앱의 핵심 UX 중 하나는
화면을 손가락으로 밀어서(interact) 무언가를 조작하는 제스처다.

특히 스와이프(Swipe) 제스처는

• 리스트 항목 삭제
• 이미지 슬라이드
• 바텀시트 열고 닫기
  등 다양한 상황에서 사용된다.

이번 글은 React Native에서 스와이프 제스처를 구현할 수 있는 다양한 방법을 정리한 글이다.

---

✅ 1. react-native-gesture-handler 설치

npm install react-native-gesture-handler

필수적으로 설치해야 하는 기본 제스처 핸들러 라이브러리
대부분의 스와이프 기능은 이 라이브러리를 기반으로 작동함

---

🔄 2. 리스트 항목 스와이프 (Swipeable)

import { Swipeable } from 'react-native-gesture-handler';

<Swipeable
  renderRightActions={() => (
    <TouchableOpacity style={styles.deleteBox}>
      <Text style={styles.deleteText}>삭제</Text>
    </TouchableOpacity>
  )}
>
  <View style={styles.listItem}>
    <Text>할 일 항목</Text>
  </View>
</Swipeable>

✅ 좌/우 액션 구현 가능
✅ onSwipeableOpen으로 액션 처리
❌ 여러 항목이 동시에 열리는 문제 → 외부 제어 필요

---

📦 3. 하단 슬라이딩 바텀시트

제스처로 위/아래로 움직이는 컴포넌트

react-native-modalize 또는 reanimated-bottom-sheet 사용

<Modalize ref={modalRef} snapPoint={300}>
  <Text>옵션 목록</Text>
</Modalize>

✅ 터치 제스처 + 바운스 효과
✅ scroll, dismiss 이벤트 모두 지원
✅ 스와이프 UX 구현에 특화

---

🧲 4. 커스텀 스와이프 (Reanimated + PanGesture)

import {
  PanGestureHandler,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedGestureHandler,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

const translateX = useSharedValue(0);

const panGesture = useAnimatedGestureHandler({
  onActive: (event) => {
    translateX.value = event.translationX;
  },
  onEnd: () => {
    translateX.value = withSpring(0);
  },
});

const animatedStyle = useAnimatedStyle(() => ({
  transform: [{ translateX: translateX.value }],
}));

<GestureHandlerRootView>
  <PanGestureHandler onGestureEvent={panGesture}>
    <Animated.View style={[styles.box, animatedStyle]} />
  </PanGestureHandler>
</GestureHandlerRootView>

✅ 자유도 높은 제스처 구현
✅ UI 컴포넌트의 직접적인 움직임 제어 가능
✅ 드래그, 스와이프, 슬라이드 등 모든 유형 구현 가능
❌ 러닝 커브 존재

---

🔧 스와이프 제스처 설계 팁

항목	전략
리스트 항목 삭제	Swipeable 컴포넌트 활용
바텀시트 제스처	Modalize, Reanimated Bottom Sheet
이미지 슬라이드	ScrollView horizontal, 또는 PanGesture
제스처 중복 방지	GestureHandler context 제한 or exclusive 처리
종료 애니메이션	withSpring, withTiming 활용해서 자연스럽게

---

📝 내가 느낀 점

초기에는 모든 스와이프 UI를 그냥 ScrollView로 처리했는데,
UX가 어색하고, 동작이 기기마다 다르게 느껴졌다.

지금은 Swipeable로 기본 제스처 처리하고,
하단 인터랙션은 Modalize + Reanimated로 부드럽게 처리하고 있다.
직접 제어가 필요한 경우엔 PanGesture를 조합해서 고급 UI를 만든다.

---

👆 “스와이프는 UI가 아니라, 감각이다. 앱의 손맛은 여기서 나온다.”

---