React(78) useEffect 에서 스크롤 이벤트 동작원리(feat. addEventListener)

 

 

 

요즘 모아놓은 스크롤 이벤트를 포스팅하다보니 개념정리도 함께 되고 있다.

예전에 급히 사용했던 퍼즐(코드) 조각들이 하나씩 모여 동작원리까지 공부하며 완성 되어 가는 것 같아 매우 뿌듯하다.

스크롤 이벤트는 워낙 다양한 사용법이 있지만 응용이 가능한 가장 기본적인 코드로 정리해보았다.

 

 

---

 

React(78) useEffect 에서 스크롤 이벤트 동작원리(feat. addEventListener)

 

웹페이지에서 일어나는 모든 사건을 이벤트라고 한다. 이벤트는 특정 동작이 벌어지는 사건이 일어난 것이다.

스크롤 이벤트는 스크롤이 움직이는 순간!! 을 감지한다.

 

 

 

 

엘레멘트 사이즈 ( Element Size ) 

스크롤 이벤트에서 많이 사용되는 수치들이다.

이 수치들을 기본적으로 알고 있어야 스크롤 맨아래까지 내리면 OOO 해줘 같은 요구사항을 잘 해결할 수 있다.

 

scroll____ 은 브라우저 전체 영역 사이즈 관련해서  붙은 이름이면,

client____ 은 보더영역 제외한 포도껍질 벗긴 알맹이 사이즈 같은 느낌이고,

offset____ 은 보더영역 포함한 포도껍질 있는 포도알사이즈 같은 느낌이랄까

 

처음에는 이걸 언제 다 기억하나 싶었다.

 

 

useEffect & addEventListener 동작원리

기본적인 스크롤 사이즈들을 익혔다면 리액트 코드에 적용해보자.

스크롤 이벤트를 사용할 때는 딱 두가지 준비물이 필요하다.

 

1. useEffect 에 담은 addEventListener

2. 스크롤 발생할때 실행시킬 함수

 

 

 

 

 

addEventListener() 에는 이벤트 타입를 넣어주면, 이벤트가 발생할 때마다 같이 넣어준 콜백함수가 실행된다.

addEventListener(이벤트 타입,  실행될 콜백함수,  옵션)

 

 

스크롤을 휙휙 내리는 상황에서,

1. useEffect 안에서 addEventListener 는 window 의 스크롤 이벤트를 감지한다.
2. 감지하면 addEventListener (안에 있는 콜백함수 handleScroll) 을 실행시킨다.
3. handleScroll 안에는 setState() 가 있어서 값이 바뀐다.
4. setState 의 값이 바뀌면 렌더링이 새로 된다. ( 리액트 부분렌더링 기법 )

 

자, 렌더가 시작되었다. 그럼 useEffect 는 다시 1번부터 실행한다.

** useEffect 는 렌더링이 끝나고 나서 실행되는 녀석이다. [dependency] 가 비어도 마찬가지이다.

 

 useEffect(() => {
    window.addEventListener('scroll', handleScroll, { capture: true }); // 스크롤 이벤트 등록
    return () => {
      window.removeEventListener('scroll', handleScroll); 		// 스크롤 이벤트 제거
    };
  }, []);

 

fuction handleScroll (){
  const scrollTop = document.getElementById('app')?.scrollTop;
  setScrollY(scrollTop);		// 스크롤 이벤트가 시작되면 요값이 변경된다
}

 

 

 

스크롤 이벤트를 사용한 코드가 궁금하시다면? (↓↓↓ 아래 포스팅 클릭)

React(77) 스크롤 시, 하위메뉴를 헤더 아래로 고정하기

 

 

 

 

ref: 

https://velog.io/@zerozoo-front/useEffect%EC%99%80-addEventListener

https://kim-solshar.tistory.com/36

https://mong-blog.tistory.com/entry/JS-%EC%B5%9C%EB%8C%80-%EC%8A%A4%ED%81%AC%EB%A1%A4%EA%B0%92-%EA%B5%AC%ED%95%98%EB%8A%94-%EB%B2%95scrollTop-scrollLeft