[React] 리액트에서 top 버튼 만들기, 스크롤 시 화면에 나타내기

메인 화면에서 아래로 스크롤이 길어졌을 때는 Top 버튼이 꼭 필요한 것 같다. 그래서 함수형 컴포넌트로 top 버튼을 만들어주어 화면 최상단으로 이동시키는 방법을 구현했다.

가장 먼저 버튼 만들기

버튼 컴포넌트를 만들어주는데 화면이 아래로 스크롤 되었을 때 showButton 값이 true로 바뀌며 버튼이 나타나는 구조이다. 버튼 스타일링은 원하는대로 하면되고, css position은 당연히 fixed!

이렇게 만들어놓은 컴포넌트를 공용 컴포넌트에 넣어두고 필요한 페이지에서 가져다쓰는 방식 또는 app.js에 import 하여 어떤 페이지에서든 적용되도록 할 수 있다.

import React, { useState, useEffect } from 'react'

const TopButton = () => {
  const [showButton, setShowButton] = useState(false);

  const scrollToTop = () => {
    window.scroll({
      top: 0,
      behavior: 'smooth'
    })

  }
  useEffect(() => {
    const ShowButtonClick = () => {
      if (window.scrollY > 800) {
        setShowButton(true)
      } else {
        setShowButton(false)
      }
    }
    window.addEventListener("scroll", ShowButtonClick)
    return () => {
      window.removeEventListener("scroll", ShowButtonClick)
    }
  }, [])
  return (
    <>
      {showButton &&
          <div>
            <button onClick={scrollToTop} type="button">Top</button>
          </div>
      }
    </>
  )
}