리액트, 스크롤 값에 따라 플로팅 버튼 띄우기

위코드에서 공부하며 정리한 내용입니다.

스크롤을 내리면서 특정 위치에서 플로팅 버튼을 띄우거나 사라지게 하는 방법입니다. 우선 스크롤 이벤트에 따라 실행하는 함수가 다른 전체 렌더링을 방해하지 않도록 useEffect 에 담고, 해당 페이지가 언마운트 되었을 때 클린업 함수로 다음 이펙트가 발생하지 않게 해야 합니다.

useEffect(() => {
  window.addEventListener("scroll", handleScroll); // 스크롤 이벤트 감지
  return () => {
    window.removeEventListener("scroll", handleScroll); // 클린업 
  };
});

높이에 따라 변화하는 state 를 만들고 handleScroll 함수로 해당 state 르 변경해 해당 버튼으 상태를 관리합니다.

  const [isFloat, setIsFloat] = useState(false);

  const handleScroll = () => {
    if (window.scrollY > 700) setIsFloat(true);
    if (window.scrollY > 3030) setIsFloat(false);
    if (window.scrollY < 700) setIsFloat(false);
  };

// 아래 JSX 에서 상태값에 따라 플로팅 버튼 생성

  return (
    <>
      <MainSlider />
      <MainSearch />
      <MainCate />
      <MainPhotoGrid />
      <MainCardSlide />
      <MainProcess />
      {isFloat && <MainApplyFloat />}
    </>
  );

이 외에 성능을 고려한 방법이나 커스텀 훅을 사용하는 방법등은 검색해보면 나오니 참고하세요.