React Hook 에서 Scroll 컨트롤 하기! top버튼 구현

 

How can I make a Top Button, click to scroll to the top ?!

 

 

서비스용 홈페이지를 개발하다 보면 항상 구현해야 하는 부분은 스크롤 입니다. 

처음에는 무조건 ref 를 사용해서 컨트럴 해야 한다고 생각했었는데, 어쨌든 리액트도 자바스크립트다 보니 꼭 그렇지만은 않더라구요. useEffect에서 addEventListener를 걸어주고 removeEventListener로 clean-up을 해주기만 하면 되더라구요. 생각보다 간단하게 구현 할 수 있었습니다. 

 

다음과 같이 클릭하면 페이지 최상단으로 스크롤 되는 기능을 구현해 보고자 합니다. 

 

우선 구조를 잡아보겠습니다. 

<div className="wrap">
  <button className="topBtn">TOP</button>
  <div className="inner">
    <h1>Fixed Scroll Top</h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, voluptas ratione libero earum alias, officia temporibus magni possimus atque rem distinctio autem unde eaque. Minus quaerat odio mollitia asperiores neque?
      ...
  </div>
</div>

 

CSS도 미리 올려두겠습니다. 디자인을 조금이라도 이쁘게 하고자 노오력 했지만.. 😅

CSS는 따로 설명 드리지 않겠습니다. 

.wrap {
  position: relative;
  padding: 30px;
  font-size: 18px;
  line-height: 1.6;
  background: lightgray;
}

.topBtn {
  position: fixed; 
  opacity: 0; 
  bottom: 40px; 
  right: 40px;
  z-index: -10; 
  width: 50px; 
  height: 50px;
  border-radius: 100%;
  border: 0 none;
  background: lightpink;
  color: blueviolet;
  border: 2px solid blueviolet;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: -0.06em;
  box-shadow: 1px 1px 6px 3px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: opacity 0.3s ease-in;
}

.topBtn.active {
  z-index: 10; 
  opacity: 1; 
}

.topBtn:hover,
.topBtn:focus,
.topBtn:active { 
  outline: 0 none; 
}

 

 

자, 그럼 구현하고 싶은 내용을 정리해보겠습니다! 

 

1. 스크롤을 100px 이상 내리면 TOP 버튼이 나타난다. 

2. TOP버튼을 클릭하면 스크롤리 최상단으로 올라간다. 

 

우선 스크롤의 값을 알기 위해 ScrollY 라는 이름으로 state를 만듦니다. 

그리고 함수를 하나 정의하여 window.pageYoffset 값을 ScrollY 에 저장 합니다. 

 

이 부분을 스크롤 할때마다 반복하면 window의 스크롤 값이 ScrollY에 저장되고, ScrollY의 값이 저장되면서 useEffect를 통해 실시간으로 바뀌는 ScrollY의 값을 알 수 있겠지요? 

 

 

  const [ScrollY, setScrollY] = useState(0);  // 스크롤값을 저장하기 위한 상태
  const handleFollow = () => {
    setScrollY(window.pageYOffset); // window 스크롤 값을 ScrollY에 저장
  }

  useEffect(() => {
    console.log("ScrollY is ", ScrollY); // ScrollY가 변화할때마다 값을 콘솔에 출력
  }, [ScrollY])

  useEffect(() => {
    const watch = () => {
      window.addEventListener('scroll', handleFollow);
    }
    watch(); // addEventListener 함수를 실행
    return () => {
      window.removeEventListener('scroll', handleFollow); // addEventListener 함수를 삭제
    }
  })

지금 같이 스크롤을 사용하는 경우 처럼 한 번 실행하는 것이 아닌 여러번 addEventListener를 사용할 때에는 removeEventListener를 꼭 해주세요! 

그렇지 않으면 여러번 호출 되고, 메모리에 gabarge collect

 

결과 이미지

 

이렇게 스크롤의 위치값을 알 수 있습니다. 

그러면 나머지는 더 쉽지요. 

저는 임의로 스크롤이 100정도 내려가면 버튼이 나타나게 하였습니다. 

 

상태에 따라 버튼을 보이고 안보이고를 결정하는 BtnStatus 값을 하나 두었습니다. 

물론 아래의 예시처럼 버튼을 아예 렌더를 하느냐 안하느냐로 할 수 있습니다.

{ BtnStatus &&<button className="topBtn">TOP</button> }

하지만 저는 opcity와 transition을 통해 좀 더 부드러운 효과를 주고 싶어서 그냥 클래스로 제어하였습니다. 

import { useState, useEffect } from 'react'
import './App.css';

function App() {

  const [ScrollY, setScrollY] = useState(0);
  const [BtnStatus, setBtnStatus] = useState(false); // 버튼 상태
  
  const handleFollow = () => {
    setScrollY(window.pageYOffset);
    if(ScrollY > 100) {
      // 100 이상이면 버튼이 보이게
      setBtnStatus(true);
    } else {
      // 100 이하면 버튼이 사라지게
      setBtnStatus(false);
    }
  }

  const handleTop = () => {  // 클릭하면 스크롤이 위로 올라가는 함수
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
    setScrollY(0);  // ScrollY 의 값을 초기화
    setBtnStatus(false); // BtnStatus의 값을 false로 바꿈 => 버튼 숨김
  }

  useEffect(() => {
    const watch = () => {
      window.addEventListener('scroll', handleFollow)
    }
    watch();
    return () => {
      window.removeEventListener('scroll', handleFollow)
    }
  })

  return (
    <div className="wrap">
      <button 
        className={BtnStatus ? "topBtn active" : "topBtn"} // 버튼 노출 여부
        onClick={handleTop}  // 버튼 클릭시 함수 호출
      >TOP</button>
      <div class="inner">
        <h1>Fixed Scroll Top</h1>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, voluptas ratione libero earum alias, officia temporibus magni possimus atque rem distinctio autem unde eaque. Minus quaerat odio mollitia asperiores neque?
          ...
      </div>
    </div>
  );
}

export default App;

 

이렇게 구현하였습니다. 생각 보다 소스도 짧고 간편해서 마음에 듭니다. 

물론 Scroll 부분만 따로 컴포넌트로 관리를 하면 더욱 좋겠네요! 

저는 샘플 소스라 그냥 한 곳에 작성하였습니다. 

 

scroll 관련하여 많은 라이브러리도 있고 ref를 사용하는 방법도 있습니다.

각 프로젝트 상황에 맞게 찾아서 적용하시면 되겠습니다. 

저는 중요하게 컨트롤 하는 부분이 아니라서 최대한 손이 덜 가고 간단하게 구현할 수 있는 것을 찾다보니 이렇게 깔끔하게 구현할 수 있는 소스를 찾아서 공유 드립니다. 

오늘도 이렇게 한 토막 배우네요! 

해당 소스가 도움이 되셨다면, 저도 기쁩니다! 🥰

 

그럼 다들 즐거운 코딩 하세요!