랜딩페이지 wheel이벤트 적용 후 top버튼 작동시키기

🥹 문제 발생

이전에 만들어 두었던 top버튼이 wheel 이벤트를 적용하니 작동하지 않는 문제가 발생하였다.

 

🤔 문제 원인

프로젝트에 적용되어 있는 wheel 이벤트가 outerDivRef라는 특정 div 요소에 scrollTo 메서드를 사용하여 강제로 스크롤을 이동시키고 있기 때문에 브라우저의 window.scrollY 값은 페이지 전체의 스크롤 위치를 반영하지 않고, 대신 outerDivRef 요소 내에서만 스크롤이 발생하게 된다. 그래서 window.scrollY는 여전히 0으로 유지되어 발생하는 문제였다.

 

🤔 해결 시도

일단 스크롤이 나타나지 않는 문제부터 해결하기 위해 scrollY의 위치를 상태로 관리하여 스크롤 값을 업데이트해 주었으나 비동기적인 업데이트로 값이 즉시 반영되지 않아 스크롤을 두 번 내렸을 때 버튼이 나타나는 문제가 있었다.

 

👍🏻 해결 방법

컴포넌트로 분리되어 있던 scroll 이벤트를 상위 컴포넌트에서 실행하여 조건부 랜더링을 하는 방식으로 변경하고, 버튼컴포넌트에서는 outerDivRef를 props로 받아 window대신 outerDivRef.current에 scrollTo를 적용해 보기로 했다.

 

결과는 성공적이였다 ~!

 

➕

기존의 커스텀 훅을 특정 ref 요소에 대한 스크롤 이벤트를 감지하고 처리할 수 있도록 변경하여 Home컴포넌트 코드의 구조를 단순화하고 가독성을 높였습니다.

import { useEffect } from "react";

export function useScrollEvent(callback: () => void, scrollRef: React.RefObject<HTMLElement>) {
  useEffect(() => {
    const handleScroll = () => {
      callback();
    };

    const element = scrollRef.current || window;
    
    if (element) {
      element.addEventListener("scroll", handleScroll);
    }

    return () => {
      if (element) {
        element.removeEventListener("scroll", handleScroll);
      }
    };
  }, [callback, scrollRef]);
}

 

이번 트러블슈팅을 통해 알게 된 점

 window.scrollY와 특정 요소(ref)의 스크롤 감지는 다르다!

- ref를 사용한 특정 요소의 스크롤은 element.scrollTop을 사용해야 감지할 수 있다는 점을 배웠습니다.