setTimeout과 쓰로틀링

이슈

import { useEffect, useState } from 'react';
import styles from './nav.module.scss';
import cx from 'classnames';

export default function Nav(){

const [isScroll, setIsScroll] = useState(false);

useEffect(() => {
    const handleScroll= () =>
      setTimeout(() => {
        window.scrollY !== 0 ? setIsScroll(true) : setIsScroll(false);
      }, 200);

    window.addEventListener("scroll", handleScroll);

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

return (
    <div className={cx(styles.container, { [styles.transNav]: isScroll })}>
      <div className={styles.title}>
																.
																.
}

쓰로틀링

코드 적용

useEffect(() => {
    let timer: null | ReturnType<typeof setTimeout>;

    const throttling = () => {
      if (!timer) {
        timer = setTimeout(() => {
          timer = null;
          window.scrollY > 180 ? setIsScroll(true) : setIsScroll(false);
        }, 200);
      }
    };

    window.addEventListener('scroll', throttling);

    return () => {
      window.removeEventListener('scroll', throttling);
    };
  }, []);

결과

setTimeout을 이용한 또 다른 방법

import Router, { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export const usePageLoading = () => {
  const {
    query: { title },
  } = useRouter();

  const [isPageLoading, setIsPageLoading] = useState(false);

  useEffect(() => {
    const routeEventStart = () => {
      setIsPageLoading(true);
    };
    const routeEventEnd = () => {
      setIsPageLoading(false);
    };

    Router.events.on('routeChangeStart', routeEventStart);
    Router.events.on('routeChangeComplete', routeEventEnd);
    Router.events.on('routeChangeError', routeEventEnd);

    return () => {
      Router.events.off('routeChangeStart', routeEventStart);
      Router.events.off('routeChangeComplete', routeEventEnd);
      Router.events.off('routeChangeError', routeEventEnd);
    };
  }, []);

  if (!title) return false;

  return isPageLoading;
};

import Router from 'next/router';
import { useEffect, useState } from 'react';

export const usePageLoading = ({timeout}: number) => {
  const [isPageLoading, setIsPageLoading] = useState(false);

  useEffect(() => {
    let timer: ReturnType<typeof setTimeout> | null;

    const routeEventStart = () => {
      timer = setTimeout(() => {
        setIsPageLoading(true);
      }, timeout);
    };
    const routeEventEnd = () => {
      clearTimeout(timer!);
      timer = null;

      setIsPageLoading(false);
    };

    Router.events.on('routeChangeStart', routeEventStart);
    Router.events.on('routeChangeComplete', routeEventEnd);
    Router.events.on('routeChangeError', routeEventEnd);

    return () => {
      Router.events.off('routeChangeStart', routeEventStart);
      Router.events.off('routeChangeComplete', routeEventEnd);
      Router.events.off('routeChangeError', routeEventEnd);
    };
  }, []);

  return isPageLoading;
};

마침