mouseEvent(브라우저 기본 동작)

슬라이드 구현 당시 드래그가 생각처럼 구현되지 않았고 stackoverflow에서 event.preventDefault()를 사용해서 해결했다는 글을 보고 코드를 추가하였다.
스택 오버플로우 링크

const onMouseDown = (event: any) => {
event.preventDefault();
setDragStartX(event.clientX);
setIsDragging(true);
};

이전에 드래그 이벤트를 참조 했던 글에서는 event.stopPropagation()를 이용했다고 했었는데 내 코드에서는 먹히지 않았기 때문에 생각하고 찾는데 오랜 시간이 걸렸다.

검색으로는 결과를 찾기 힘들었고 ChatGPT와의 대화로 알게된 사실이 있다.

그것은 onMouseDown은 드래그하거나, 클릭 이벤트와 같은 후속 동작을 수행하는 등의 기본 동작을 수행하기 때문에 사용자가 요소를 드래그하는 동작을 직접 구현하거나, 다른 동작을 수행할 때 충돌이 일어날 수 있다는 점이였다.

좀 더 자세하게 설명한 GPT의 말을 들어보자

=> onMouseDown 이벤트 핸들러에서 event.preventDefault()를 호출하지 않고 기본 동작을 수행하는 경우, 선택된 요소를 드래그하거나 클릭과 같은 후속 동작을 수행할 수 있습니다. 이러한 동작은 사용자가 요소를 드래그하는 동작을 직접 구현하거나 다른 동작을 수행하는 데 충돌을 일으킬 수 있습니다.

예를 들어, onMouseDown 이벤트 핸들러에서 event.preventDefault()를 호출하지 않은 경우, 요소를 드래그하면 브라우저는 해당 요소의 드래그 동작을 수행하고, 클릭 이벤트 또는 기타 후속 동작을 처리할 수 있습니다. 그러나 사용자가 직접 드래그 동작을 구현하거나 다른 동작을 수행하려는 경우에는 이러한 기본 동작이 방해가 될 수 있습니다.

따라서, 사용자가 요소를 드래그하거나 다른 동작을 수행하려는 경우에는 onMouseDown 이벤트 핸들러에서 event.preventDefault()를 호출하여 기본 동작을 막아야 합니다. 이렇게 하면 브라우저의 기본 동작을 방지하고, 사용자가 원하는 동작을 구현할 수 있게 됩니다.

https://ko.javascript.info/default-browser-action