React 및 Sass를 사용한 스마트 Navbar

소개

This tutorial assumes you have some knowledge on React and Sass (scss).

고정식 또는 고정식 내비게이션 바는 사용자가 웹 애플리케이션이나 웹 사이트를 탐색하기 위해 접근하기 쉬운 액세스를 제공하기 때문에 널리 사용되는 디자인 선택입니다.
그러나 특히 작은 화면에서는 공간을 차지하며 보기 좋지 않은 방식으로 콘텐츠를 가릴 수 있습니다.

가능한 솔루션 :- 스마트 내비게이션

스마트 탐색 모음은 사용자가 페이지 상단에 있을 때 계속 표시됩니다. navbar는 사용자가 페이지의 어느 위치에서든 위쪽으로 스크롤하면 표시되고 사용자가 페이지 아래쪽으로 스크롤하면 숨겨집니다.

.jsx에 대한 코드를 살펴보겠습니다.

function Navbar(){

  return (
    <nav className='nav'>
      <div className='mainDiv'>
        <span>
          Logo
        </span>

        <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
        </ul>
      </div>
    </nav>
}

그리고 .scss에 대한 코드

.nav {
  position: fixed;
  width: 100%;
  z-index: 999;
  top: 0;
  right: 0;
  left: 0;
  padding: 0.3rem 0;
  transition: all 200ms ease-in-out;

  .mainDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

탐색을 추적하고 그에 따라 수정할 수 있는 일부 상태 변수를 정의할 수 있습니다.

const [atTop, setAtTop] = useState(true);
const [scrollDirection, setScrollDirection] = useState('');

사용자가 페이지를 스크롤할 때와 스크롤 방향을 감지해야 합니다. 마지막 스크롤 위치 값이 현재 스크롤 위치 값보다 작은 경우 사용자가 아래로 스크롤하고 있습니다.

useEffect(() => {
    const threshold = 0;
    let lastScrollY = window.pageYOffset;
    let ticking = false;

    const updateScrollDirection = () => {
      const scrollY = window.pageYOffset;

      if (Math.abs(scrollY - lastScrollY) < threshold) {
        ticking = false;
        return;
      }
      setScrollDirection(scrollY > lastScrollY ? "down" : "up");
      lastScrollY = scrollY > 0 ? scrollY : 0;
      ticking = false;
    };

    const onScroll = () => {
      if (!ticking) {
        window.requestAnimationFrame(updateScrollDirection);
        ticking = true;
      }
    };

    window.addEventListener("scroll", onScroll);

    return () => window.removeEventListener("scroll", onScroll);
  }, [scrollDirection]);

이 논리를 사용하여 페이지가 아래로 스크롤되는 시기를 감지하고 스타일을 전환할 수 있습니다.

// navbar.jsx

<nav className={'nav ${scrollDir === 'down' ? 'isScrollingDown' : '' }'}>
...
</nav>

사용자가 아래로 스크롤하면 .isScrollingDown 클래스를 추가하고 사용자가 위로 스크롤하면 간단히 클래스를 제거합니다.

// style.scss

.isScrollingDown {
  transform: translateY(-100%);
}

성능

스크롤 이벤트로 작업할 때 역효과를 낼 수 있는 함수를 너무 많이 호출할 수 있으므로 성능에 큰 주의를 기울이는 것이 중요합니다.
위useEffect에서는 사용자가 반대 방향으로 스크롤할 때만 상태scrollDirection를 업데이트합니다.

또한 사용자가 페이지 상단에 있을 때를 확인하고 스로틀 기능을 활용하여 스타일을 업데이트하거나 다른 논리를 수행할 수 있습니다.

간단히 말해서 스로틀 함수는 전달된 함수에 대한 타이머 역할을 하는 고차 함수로 정의할 수 있습니다.
스로틀 기능의 예를 살펴보겠습니다.

// initialize a throttleWait variable for performance
  let throttleWait;

  const throttle = (callback, time) => {
    // if the variable is true, don't run the function
    if (throttleWait) return;

    // set the wait variable to true to pause the function
    throttleWait = true;

    // use setTimeout to run the function within the specified time
    setTimeout(() => {
      callback();

      // set throttleWait to false once the timer is up to restart the throttle function
      throttleWait = false;
    }, time);
  };

useEffect에서 throttle 함수를 사용하여 원하는 대로 로직을 수행할 수 있습니다.

const navbarControl = () => {
   if (window.scrollY < 50) {
     setAtTop(true);
   } else {
     setAtTop(false);
   }
};

useEffect(() => {
    window.addEventListener("scroll", () => throttle(navbarControl, 500));

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

이 구현에서는 navbarControl 함수가 500밀리초마다 한 번만 호출됩니다.

결론

스타일 지정을 위해 React 및 Sass를 사용한 스마트 탐색 구현이 있습니다. 이제 사용자는 페이지의 콘텐츠를 차단하는 방식으로 부동산 손실 없이 웹 앱/웹 사이트를 쉽게 탐색할 수 있습니다.