리액트로 마우스 드래그 가로 스크롤 구현하기 (+합성 컴포넌트로 재사용 높이기)
모바일 브라우저에서는 터치 스크린을 기반으로 하기 때문에 scroll이 있을때 드래그를 하면 자연스럽게 스크롤이 된다. 하지만 데스크탑의 경우에는 마우스를 기반이라 마우스로 드래그를 하면 일반 요소를 드래그 하는걸로 인식이 된다. 드래그 했을때 스크롤이 되지 않기 때문에 직접 드래그 이벤트를 걸어줘야 한다.이번에 리스트에 가로스크롤을 구현하게 되었는데 모바일&데스크탑에서도 구현이 가능해야 했으므로 직접 드래그 이벤트를 구현해 적용했다. Drag and Drop API 사용하기HTML요소를 드래그 앤 드롭 하게 해줄 수 있는 기능이다.나는 총 5가지의 기능을 사용했다.1. draggable : 드래그 대상에 true값을 설정해주면 해당 요소가 드래그 된다.2. dragstart : 드래그가 시작될때 발생...
2024.09.19
