[React] 사이드 내비게이션 컴포넌트 구현

오늘은 웹사이트의 사용자 경험을 개선하기 위한 사이드 네비게이션 컴포넌트를 개발했다. 사용자가 웹페이지를 스크롤할 때 특정 섹션으로 쉽게 이동할 수 있도록 하는 기능이 필요했다. 특히 채용 정보를 보여주는 웹사이트에서 '추천 공고', '인기 공고', '주목받는 공고'와 같은 주요 섹션으로의 빠른 이동을 가능하게 하고, 페이지 상단으로 돌아갈 수 있는 기능도 포함시켰다. 

 

 

구현 과정 및 코드 설명

먼저 필요한 라이브러리와 스타일을 임포트했다. 특히 아이콘은 Lucide React 라이브러리를 사용하여 시각적으로 직관적인 네비게이션을 제공하고자 했다.

import React, { useEffect, useState } from "react";
import styles from "../../assets/css/main/SideNavigation.module.css";
import { Star, Target, Flame, TrendingUp, ArrowUp } from "lucide-react";

 

컴포넌트 내부에서는 스크롤 위치를 감지하기 위한 상태 변수를 useState 훅을 통해 설정했다.

const [scrollPosition, setScrollPosition] = useState(0);

 

스크롤 이벤트를 감지하는 기능은 useEffect 훅을 사용하여 구현했다. 이 부분은 사용자가 페이지를 스크롤할 때마다 현재 스크롤 위치를 업데이트한다. 특히 컴포넌트가 언마운트될 때 이벤트 리스너를 제거하는 클린업 함수를 포함시켜 메모리 누수를 방지했다.

useEffect(() => {
  const handleScroll = () => {
    setScrollPosition(window.scrollY);
  };

  window.addEventListener("scroll", handleScroll);

  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, []);

 

특정 섹션으로 스크롤하는 함수는 다음과 같이 구현했다. 이 함수는 대상 요소의 ID를 매개변수로 받아, 해당 요소로 부드럽게 스크롤한다. 헤더 높이를 고려하여 약간 위쪽으로 조정하는 로직을 포함시켰다.

const scrollToSection = (id) => {
  const element = document.getElementById(id);
  if (element) {
    // 헤더 높이를 고려하여 약간 위로 스크롤 (필요에 따라 조정)
    const headerOffset = 80;
    const elementPosition = element.getBoundingClientRect().top;
    const offsetPosition =
      elementPosition + window.pageYOffset - headerOffset;

    window.scrollTo({
      top: offsetPosition,
      behavior: "smooth",
    });
  }
};

 

추가로 페이지 최상단으로 이동하는 기능도 구현했다.

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

 

마지막으로 컴포넌트의 렌더링 부분에서는 각 섹션으로 이동할 수 있는 버튼들을 배치했다. 각 버튼에는 직관적인 아이콘과 텍스트를 함께 표시하여 사용자가 쉽게 인식할 수 있도록 했다.

return (
  <div className={styles.sideNavContainer}>
    <div className={styles.sideNav}>
      <ul>
        <li>
          <button
            onClick={() => scrollToSection("recommended-jobs")}
            className={styles.navItem}
          >
            <Star className={styles.icon} size={20} />
            <span className={styles.text}>추천 공고</span>
          </button>
        </li>
        <li>
          <button
            onClick={() => scrollToSection("popular-jobs")}
            className={styles.navItem}
          >
            <Flame className={styles.icon} size={20} />
            <span className={styles.text}>인기 공고</span>
          </button>
        </li>
        <li>
          <button
            onClick={() => scrollToSection("trending-jobs")}
            className={styles.navItem}
          >
            <TrendingUp className={styles.icon} size={20} />
            <span className={styles.text}>주목받는 공고</span>
          </button>
        </li>
        <li>
          <button onClick={scrollToTop} className={styles.navItem}>
            <ArrowUp className={styles.icon} size={20} />
            <span className={styles.text}>TOP</span>
          </button>
        </li>
      </ul>
    </div>
  </div>
);

 

완성된 화면

아직 초반 작업이라 디테일하지 않지만 대략 이런식으로 사이드 내비게이션을 구성했다.

마무리

사이드 네비게이션 컴포넌트가 웹사이트의 사용성을 크게 향상시킬 수 있다. 다음에는 현재 스크롤 위치에 따라 해당 섹션의 네비게이션 버튼이 활성화되는 기능을 추가하여 더욱 직관적인 인터페이스를 구현할 계획이다.