React : 스크롤에 반응하는 네브바 만들기 (useScrollDirection)

스크롤을 내리면 사라졌다가, 올리면 다시 나타나는 네브바를 만들고자 했다.

이를 위해 스크롤 위치를 이전 위치와 비교함으로써 방향을 알아내는 Custom Hook을 만들었다.

useScrollDirection

import { useState, useEffect } from "react";

const useScrollDirection = (initialValue: string) => {
  // 스크롤 방향
  // 네브바 초기 설정에 필요한 initialValue ("up" 또는 "down")
  const [scrollDirection, setScrollDirection] = useState(initialValue);

  useEffect(() => {
    let lastScrollY = window.pageYOffset; // 현재 스크롤 위치
    
    /** 스크롤 방향을 업데이트 하는 함수 */
    const updateScrollDirection = () => {
      const scrollY = window.pageYOffset; // 현재 스크롤 위치
      // 이전 위치랑 비교해 방향 알아내기
      const direction = scrollY > lastScrollY ? "down" : "up"; 
      
      // 스크롤 방향이 바뀐 경우에 setState로 업데이트
      if (direction !== scrollDirection) {
        setScrollDirection(direction);
      }
      
      lastScrollY = scrollY > 0 ? scrollY : 0; // 이전 위치 업뎃
    };
    
    
    // 이벤트 리스너 등록
    window.addEventListener("scroll", updateScrollDirection); 
    
    // 이벤트 리스너 삭제 (clean up)
    return () => {
      window.removeEventListener("scroll", updateScrollDirection); 
    };
    
  }, [scrollDirection]);

  return [scrollDirection, setScrollDirection];
};

export default useScrollDirection;

코드 적용

스크롤 방향의 여부에 따라 className을 다르게 부여함으로써 네브바가 숨었다 나왔다 할 수 있게 만들어줬다.

const [scrollDirection, setScrollDirection] = useScrollDirection("up");


...생략


 <div className={scrollDirection === "up" ? "nav active" : "nav inactive"}>
        
      </div>

이전엔 커스텀 훅의 장점을 잘 몰랐었는데, 직접 써보니 확실히 코드가 간결해지고 재사용도 할 수 있어 너무 좋은 것 같다. 아직 미숙하지만 다양한 커스텀 훅을 만들어 사용하는 연습을 하면 좋을 것 같다.