이번 프로젝트에서 가로로 스와이프, 스크롤 등이 가능한 카드 리스트를 구현하면서 많은 문제를 마주했다.
트러블 슈팅은 별도 글로 정리해볼 예정!

이 글은 해당 트러블 슈팅 중, 공부하게 된 내용을 간단히 정리해본 글이다.

onPan?

onDrag는 너무 익숙한데 onPan이 생소했던 터라 이번 기회에 어떤 차이점이 있고, 어떤 장점이 있어서 사용하는지를 정리해봤다.

🔍onDrag vs onPan 차이점

framer-motion에서 onDrag과 onPan의 차이점이 있어서 onPan을 사용할 수도 있다.

이벤트	특징	언제 사용해야 할까?
onDrag	drag="x" 또는 drag="y" 설정 필요	요소가 드래그 가능할 때
onPan	드래그 제약 없이 터치/마우스 이동 감지 가능	스와이프, 스크롤 같은 자유로운 움직임 감지할 때

---

🎯onPan을 쓰는 이유

1. 더 빠른 반응성 → onDrag는 drag 속성에 영향을 받아 내부적으로 상태를 관리하지만, onPan은 직접적인 pointer 이벤트를 감지해서 더 즉각적으로 반응할 수 있다.
2. 제약 없이 사용 가능 → onDrag은 drag="y" 같은 속성이 필요하지만, onPan은 이런 제한 없이 터치/마우스 움직임을 감지할 수 있다.
3. 모바일 터치 지원 → onPan은 touch와 mouse 이벤트를 모두 감지할 수 있어서 모바일에서도 더 부드럽게 동작한다.

---

🔹언제 onDrag을 써야 할까?

• dragElastic(드래그 탄성 효과)를 조절하고 싶을 때
• whileDrag 같은 애니메이션을 활용할 때

🔹언제 onPan을 써야 할까?

• drag="y" 같은 설정 없이 터치 이벤트만으로 감지하고 싶을 때
• 더 자연스럽고 직관적인 움직임을 원할 때
• 드래그 외에도 터치 스크롤을 감지해야 할 때