스크롤을 내리면 사라졌다가, 올리면 다시 나타나는 네브바를 만들고자 했다.
이를 위해 스크롤 위치를 이전 위치와 비교함으로써 방향을 알아내는 Custom Hook을 만들었다.
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>
이전엔 커스텀 훅의 장점을 잘 몰랐었는데, 직접 써보니 확실히 코드가 간결해지고 재사용도 할 수 있어 너무 좋은 것 같다. 아직 미숙하지만 다양한 커스텀 훅을 만들어 사용하는 연습을 하면 좋을 것 같다.