드래그 드랍 pointer 이벤트 vs drag 이벤트

최초 업로드 2024-04-12 / 마지막 수정 2024-04-27

드래그 드랍을 mouse, pointer, drag 이벤트로 각각 구현해보고 나서 느낀점을 적으려고한다.

mouse랑 pointer은 유사하기에 합쳐서 포인터로 부르겠다.

드래그 시 아이템이 따라오도록 구현

• 포인터의 경우 두 가지가 있다

  • 드래그를 시작한 아이템에 absolute + left + right 설정해주기
  • 드래그를 시작한 아이템에 translate(x, y) 설정해주기

• 드래그의 경우 한 가지가 있다

  • clone을 통해 미리보기를 똑같도록 교체 + 실존하던 item을 숨김처리

드래그의 경우 clone이 거의 필수이다보니 내가 구현했던 컴포넌트 중에 새로 생성되면 내부 모양이 바뀌어버리는 것이 있어서 문제가 생기는 경우가 발생했었던 적이 있긴하다. (내부에 랜덤한 이미지가 존재) 하지만 흔한 경우는 아니긴하다.

모 회사의 과제에서는 이 드래그 시작할 때 아이템에 absolute 설정해주는게 원본 컴포넌트를 유지할 수 있어서 선택했었는데, 지금 생각해보니까 드래그 이벤트는 매 mousemove마다 x, y를 트래킹해주지 않아도 되어서 퍼포먼스적으로 더 유리할 수도 있겠다는 생각이 든다.

Droppable 진입 탈퇴 여부 확인

• 포인터의 경우

  • 마우스 위치에서 elementsFromPoint를 쓴 후 droppable을 찾기
  • pointermove마다 체크해주어야한다. => dom tree 크기에 따라 다르겠지만 좀 많은 오퍼레이션을 요할 수도 있겠다.

• 드래그의 경우

  • ondragenter과 ondragleave가 자동으로 잡아준다.

이것도 드래그의 경우가 더 유리하지 않나라는 생각이 이제 든다... 포인터는 pointermove 마다 커서 아래에 있는 dom 요소 모두를 순회해야된다. 나중에 드래그 이벤트로 만든 것을 드래그할 때 어떤 연산을 하는지 performance 체크를 해보아야겠다.

추가적인 차이

• 포인터는 window에 move, up 이벤트를 부착했다가 떼어내야한다.
• 드래그 이벤트는 브라우저 바깥으로도 드래그 할 수 있도 바깥에서의 드래그 드롭도 받을 수 있다.
• 포인터는 모바일에서 세부적인 정보를 추가로 받아서 처리할 수 있다.
• 드래그 이벤트는 핸들러 종류가 더 많은 대신 코드 정리가 조금은 더 편할 수도 있다. (enter leave 덕분에 droppable 변경 시 자동으로 함수 핸들러가 나뉘기에)

결론

음... drag 이벤트로 부드러운 UX를 아직 구현해보진 않았는데 (조만간 해볼 예정이다. 해보면 이 글도 바뀔수도.) drag가 성능면으로 브라우저가 최적화할 수 있도록 해주기에 더 좋다고 생각이 든다.

내가 여태까지 조사한 바로는 pointer 이벤트가 큰 우위를 점하는 케이스는 포인터 이벤트만 가지는 모바일 터치의 세부 정보를 이용해서 tilt같은 더 복잡한 UX를 다룰 때인 것 같다.

최근 회사 과제로 썼던 pointer 이벤트가 너무 비효율적인 접근이었을 수 있겠다는 생각이 든다.