Header: ScrollY에 따른 Nav bg 전환 렌더링 문제

[choigirang]

// Header.tsx
export default Index(){
  const [scroll, setScroll] = useState(false);

  useEffect(() => {
    const scrollHandler = () => {
      if(window.scrollY > 100 && !scroll){
        setScroll(true);
       } else if (window.scrollY <= 100 && scroll) {
          setScroll(false);
       };
    };

    window.addEventListener('scroll', scrollHandler);

    return () => window.removeEventListner('scroll', scrollHandler);
  }, [scroll])
}

스크롤 값에 따라 bg 변경, 스크롤을 실행할 때마다 발생하는 렌더링 해결 필요

[choigirang]

requestAnimationFrame 로 렌더링 최소화시키기

  useEffect(() => {
    let animationFrameId: number;

    const scrollHandler = () => {
      cancelAnimationFrame(animationFrameId);

      animationFrameId = requestAnimationFrame(() => {
        if (window.scrollY > 100 && !scroll) {
          setScroll(true);
        } else if (window.scrollY <= 100 && scroll) {
          setScroll(false);
        }
      });
    };
    scrollHandler();
    window.addEventListener('scroll', scrollHandler);

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

새로고침 시 발생할 수 있는 최초 실행 추가