[스터디기록03/티코드(React)] wheel event 알아보기

🏔️ 티코드 스터디 소개
- 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디
- 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것

 

예제 완성본

 

이번 포스팅은 구현 과정보다 준비하면서 알게 된 wheel event에 대해 기록하고자 한다.

리액트에서 FullPage Scroll를 구현하기 위해서는 마우스 휠의 방향을 통해 페이지의 이동 방향을 알아낼 수 있는 wheel event값, 스크롤이 발생하는 DOM 요소의 스크롤 위치를 알아내는 useRef.current값, 뷰포트의 세로길이가 필요하다. 이 값들을 사용하여 위치를 계산한 후 scrollTo API를 활용하여 이동할 위치를 지정해준다.

📑  wheel event란?

사용자가 휠 버튼(일반적으로 마우스)에서 휠을 회전할 때 발생하는 이벤트

 

🧐  사용법

addEventListener("wheel", 실행할함수);

 

이벤트 리스너를 통해  WheelEvent를 등록해주면 아래 속성들을 사용하여 원하는 값들을 얻을 수 있다.

WheelEvent가 가지고 있는 속성들은 다음과 같다.

 

여기서 휠 이벤트가 발생할 때 세로 기준 이동 방향을 알 수 있는 속성은 deltaY다. 해당 속성은 사용자의 액션에 따라 양수 혹은 음수로 세로 방향의 픽셀 이동값을 반환해준다.

deltaY	사용자 액션	페이지 방향
양수	스크롤(휠)을 내림	화면이 올라감(다음 페이지로)
음수	스크롤(휠)을 올림	화면이 내려감(이전 페이지로)

deltaY 반환값

 

참고로 MDN에서는 wheel even와 scroll event를 혼동하지 말라고 한다. 스크롤에 대한 정보를 가져오려면 scrollLeft, scrollTop과 같은 scroll 관련 이벤트를 사용하는 것을 권장한다. wheel event는 mdn에서 제공했던 예제처럼 zoom 같은 기능을 구현할 때 사용하면 유용할 이벤트이지 않을까라는 생각이 들었다. 용도에 맞게 활용하는 것이 중요하다!

 

📚 배운 점

매주 돌아가면서 스터디원들에게 알려주고싶은 기능을 만들어가는데, 이번주는 내 차례여서 FullPage Scroll 구현을 준비해갔다. 같이 구현하다보니 여러가지 문제점들을 발견하면서 이래서 라이브러리 쓰나봐요!라는 결론이 나왔지만 이렇게 함께 고민할 수 있는 시간이 참 즐겁다. 또한, 누군가에게 지식을 알려주기 위해 준비하는 경험 또한 귀하다는 생각이 든다. 그러니 더 다양한 기능에 관심을 가지자!

---

참고

[mdn] wheel event (링크)

[블로그] 리액트 전체화면 넘기기 스크롤링(full page scroll) - jaewooojung (링크)

 

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!