React - Top버튼 (scroll to top)만들기

탑 버튼을 만들기 전에 구글링으로 검색하여 여러 방법들을 봤었는데 내가 생각했던 javascript 코드와는 살짝 달랐었다.

어떤 사람은 hook을 만들었고 또 어떤 사람은 내가 생각했던 javascript 방식과 비슷했다.

무엇보다 코드를 작성하기 이전에 나는 React를 사용하고 있다는 것을 잊고 있었다.(진짜...에휴😩)

그리하여 useState와 useEffect 활용의 중요성을 다시금 알게됐다.

scroll to top

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

  // 3가지문법
  //window.scrollTo(x좌표, y좌표) 
  //window.scrollTo({top, left, behavior})
  //window.scroll( top, left, behavior );

mdn에서 알려주는 scrollTo의 문법은 (x,y)를 알려주고 있고,
위에 작성한 코드는 scroll의 options문법을 활용한 코드이다.

behavior = auto , smooth
behavior는 두가지로 나뉘는데 auto = 위치로 바로 대려다 주고 smooth는 부드럽게 끌어올린다.

make button

 <div className="scroll__container">
<button id="top" onClick={scrollToTop} type="button" > Top</button>
</div>

버튼을 감싸주는 div와 button 태그를 만들어주고 위에 작성한 클릭하였을 때 스크롤 해줄 onClick 함수를 넣어주자.

css

.scroll__container{
  position: fixed;
  right: 5%;
  bottom: 5%;
  z-index: 1;
}
#top{
  font-weight: bold;
  font-size: 15px;
  padding :15px 10px;
  background-color: #000;
  color:#fff;
  border: 1px solid rgb(210, 204, 193);
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}
#top:hover{
  color :rgb(142, 26, 26);
}

귀요운 동그라미를 만들었다.

useState

원래 생각한 대로라면 useState를 사용하지 않고 if문을 통해 스크롤 위치를 비교하여 classList.add()를 사용했을 것이다.

찾아보다가 알게된 것은 React에서 DOM에 접근하려고 한다면 useRef를 사용해야 된다는 것

useRef의 특징
저장공간(변수관리), DOM에 요소에 접근
자세한건 useRef사용법에서 확인해 보자.

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

버튼을 on & off 해주기 위한 useState 기본값은 숨겨두기 위해 false로 둬주자.

useEffect

  useEffect(() => {
        const handleShowButton = () => {
            if (window.scrollY > 500) {
                setShowButton(true)
            } else {
                setShowButton(false)
            }
        }


        window.addEventListener("scroll", handleShowButton)
        return () => {
            window.removeEventListener("scroll", handleShowButton)
        }
    }, [])

스크롤을 500만큼 내렸을 때 true로 변경하여
TOP버튼을 나타나게 해준다.

얼만큼 스크롤 되었는지 알기 위하여 EventListener를 추가해주고 언마운트 시에 remove 될수 있게 Clean-up함수를 추가

scrollY

구글링 하다보면 window.scrollY 이 아닌 window.pageYOffset 코드를 볼 수 있다.
window.pageYOffset 코드는 scrollY의 다른 이름이다.
Deprecated인 것을 알고 넘어가자.

window.scrollY === window.pageYOffset

조건부 렌더링 &&

이제 버튼이 true & false 될때 나타나고 사라지게 하기위해 논리연산자 && 을을 사용해보자.

return showButton && (
<div className="scroll__container">
<button id="top" onClick={scrollToTop} type="button" > Top</button>
</div>
    )

만약 showButton이 true라면 && 다음에 오는 조건을 실행하고 false이면 무시(실행x)한다. codepen 예시

전체코드

function TopButton() {

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

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

    }
    useEffect(() => {
        const handleShowButton = () => {
            if (window.scrollY > 500) {
                setShowButton(true)
            } else {
                setShowButton(false)
            }
        }

        console.log(window.scrollY)
        window.addEventListener("scroll", handleShowButton)
        return () => {
            window.removeEventListener("scroll", handleShowButton)
        }
    }, [])

    return showButton && (
        <div className="scroll__container">
            <button id="top" onClick={scrollToTop} type="button" > Top</button>
        </div>

    )
}