useNavigationType으로 탭 메뉴 클릭 시 스크롤 이동

 

포트폴리오 사이트를 768px 이하의 화면에서는 사이드바에 있던 프로필을 화면 상단으로 이동시키고, 탭 메뉴를 가운데로 배치했습니다. 그러나 탭을 전환할 때마다 탭 메뉴로 다시 스크롤해야 하는 불편함이 있었습니다.

이를 해결하기 위해 탭 메뉴를 고정(sticky)하고, 탭 클릭 시 자동으로 탭 메뉴 위치로 스크롤이 이동하도록 구현했습니다.

스크롤 로직 구현

React의 useRef와 useEffect를 활용해 스크롤 동작을 제어했고, useNavigationType을 사용하여 PUSH 방식의 네비게이션에서만 스크롤이 동작하도록 설정했습니다.

즉, 페이지 새로고침이나 첫 진입 시에는 스크롤이 발생하지 않도록 했습니다.

const navigationType = useNavigationType();
const ref = useRef<HTMLDivElement>(null);
const [paddingTop, setPaddingTop] = useState(0);

useEffect(() => {
    const root = document.querySelector("#root");
    if (root) {
        setPaddingTop(parseInt(window.getComputedStyle(root).paddingTop, 10));
    }
}, []);

useEffect(() => {
    if (window.innerWidth <= 768 && navigationType === 'PUSH' && ref.current) {
        const bottom = ref.current.getBoundingClientRect().bottom + window.scrollY - paddingTop;
        window.scrollTo({
            top: bottom,
            behavior: 'smooth',
        });
    }
}, [location.pathname, navigationType]);

useNavigationType은 세 가지 네비게이션 타입을 제공합니다.

1. POP: 브라우저 뒤로가기/앞으로가기 버튼 클릭 시 발생합니다.
2. REPLACE: 페이지 경로가 교체될 때 발생합니다.
3. PUSH: 새로운 경로로 이동할 때 발생합니다.