react에서 top버튼 만들기

이용하는 홈페이지의 메인화면에서 스크롤을 많이 내렸을 때 한 번에 올라갈 수 있는 기능을 하는 버튼을 오른쪽 하단에서 본 적이 있을 것입니다. 이 기능을 사용하면 홈페이지를 이용하는데 편리함을 더해 줄 수 있겠죠?

 

그래서 오늘은 브라우저를 300만큼 내렸을 때 top버튼이 나오면서 맨위로 올라가는 기능을 하는 버튼을 만들어보겠습니다!

import { useEffect, useState } from 'react';
import { StUpIcon } from './UpButton.styled';

function UpButton() {
  const [upButton, setUpButton] = useState(false);

  useEffect(() => {
    const handleShowButton = () => {
      if (window.scrollY > 300) {
        setUpButton(true);
      } else {
        setUpButton(false);
      }
    };

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

• window.scrollY - 원점으로부터 문서를 수직방향으로 스크롤한 픽셀의 수를 나타냅니다.

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

• behavior은 auto와 smooth 두가지 옵션이 있습니다.

auto -위치로 바로 데려다주기

somooth - 부드럽게 끌어올리기

 

styled컴포넌트와 react-icon을 사용하여 css 완성하기

import { HiArrowUpCircle } from 'react-icons/hi2';
import styled from 'styled-components';

export const StUpIcon = styled(HiArrowUpCircle)`
  width: 50px;
  height: 50px;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  transition: 0.3s;
  visibility: hidden;
  display: block;
  position: fixed;
  bottom: 95px;
  right: 70px;
  visibility: visible;
  opacity: 1;
  border-radius: 50px;
  color: var(--button-color);
  &:hover {
    color: var(--point-color);
  }
`;

 

마지막으로 return부분을 작성해 줍니다.

 return <div className="scroll__container">{upButton && <StUpIcon onClick={scrollToTop} />}</div>;
}

export default UpButton;

&&을 넣어주어 upButton이 true일 때 <StUpIcon onClick={scrollToTop}이 실행되도록 구현하였습니다!

 

javascript로만 top버튼을 만들어봐서 마지막 return부분에 css를 제어하여 상태가 변경되도록 만들었는데 handleShowButton함수를  만들어 if문을 넣어 주었고 논리연산자 &&을 사용하여 좀 더 깔끔하게 다시 리팩토링 해보았습니다 ㅎㅎ