리액트 가로 스크롤

개발하신 방법을 통해 CSS를 통한 간단한 가로 스크롤 구현은 가능합니다. 이 방법은 컴포넌트가 자동으로 넘쳐서 가로방향으로 스크롤되게 하는 것입니다. 그런데 이렇게 하면 사용자가 마우스 휠을 아래로 내릴 때, 기대하는 대로 세로 스크롤이 아니라 가로 스크롤이 일어나기 때문에 UI/UX 측면에서 불편할 수 있습니다. 이러한 경우에는 추가적인 마우스 이벤트를 활용해서 사용자의 스크롤 동작을 잡아내서 그에 맞는 동작(가로 또는 세로 스크롤)을 실행시켜줘야 합니다. 따라서 개발하실 때 마우스 이벤트를 받아와서 구현하는 부분은, 사용자 경험(UX)을 위해 필요한 고려사항 중 하나일 수 있다고 볼 수 있습니다. 마우스 휠 이벤트는 'onWheel' 속성을 사용하여 리액트에서 처리할 수 있습니다. ```react div onWheel={(event) => { // event.deltaY : 양수면 아래로, 음수면 위로 스크롤했다. // event.deltaY 값만큼 가로 스크롤을 움직이게 설정 divRef.current.scrollLeft += event.deltaY; }} ``` 위와 같이 onWheel 이벤트를 활용하여 가로 스크롤을 구현할 수 있습니다. 이렇게 하면 사용자가 마우스 휠을 아래로 내릴 때 가로 방향으로 스크롤이 되게 할 수 있어서 더 직관적인 UI/UX를 제공할 수 있습니다. 모든 경우에 마우스 이벤트를 받아와서 구현하는 것은 아니며, 프로젝트의 요구사항과 UX 디자인에 따라 달라질 수 있습니다.