[React] 페이지 맨 위로 스크롤하는 버튼 만들기

블로그 사이트를 제작하면서 페이지 맨 위로 스크롤하는 버튼의 필요성을 경험하였고, 사용자 경험을 향상시키는데 도움이 될 수 있다는 생각을 하게 되었다. 다른 웹사이트에서도 흔히 볼 수 있는 부분이여서 찾아보게 되었다. window.scrollTo를 통해 쉽게 구현할 수 있었다.

MoveButton 컴포넌트로 만들기

MoveButton를 컴포넌트로 만들어서 필요한 페이지에서 재사용 가능하도록 만들었다. scrollTop 함수는 페이지를 맨 위로 스크롤하는 역할을 하며, window.scrollTo 메소드를 사용하여 창을 스크롤한다. 여기에는 두개의 속성이 있는데, top은 수직 스크롤 위치를 지정한다. top을 0으로 설정하여 창의 맨 위로 스크롤하도록 하였다. behavior는 스크롤 동작을 지정하며, auto와 smooth값이 있다. auto 브라우저의 기본 스크롤 동작을 따르며 바로 이동한다. smooth는 애니메이션 효과를 추가하여 스크롤을 부드럽게 만들어준다.

import styled from 'styled-components';
import UpArrowButton from '../image/upArrow.svg';
import UpArrowHoverButton from '../image/upArrowHover.svg';

const MoveWrapper = styled.div`
  margin: 25px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 5;
  @media (max-width: 1200px) {
    margin: 10px;
    right: 10px;
    bottom: 20px;
  }
  @media (max-width: 900px) {
    margin: 5px;
    right: 5px;
  }
`;

const MoveTopButton = styled.button`
  background: transparent;
  border: none;
  width: 35px;
  height: 35px;
  background-image: url(${UpArrowButton});
  background-repeat: no-repeat;
  background-size: contain;
  transition: background-image 0.3s ease-in-out;
  &:hover {
    background-image: url(${UpArrowHoverButton});
  }
  @media (max-width: 500px) {
    width: 30px;
    height: 30px;
  }
`;

function MoveButton() {
  const scrollTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };

  return (
    <MoveWrapper>
      <MoveTopButton onClick={scrollTop}></MoveTopButton>
    </MoveWrapper>
  );
}

export default MoveButton;

MoveButton 컴포넌트 사용하기

MoveButton 컴포넌트를 만들고 필요한 페이지에 한줄만 적어넣으면 사용할 수 있었다. 컴포넌트로 만들면 코드를 재사용할 수 있고, 버튼의 스타일이나 다른 속성을 변경하는 일이 생기면 한 곳에서만 수정하면 된다. 모듈화된 컴포넌트 디자인은 유지보수성을 높이고 컴포넌트의 역활도 명확하게 알아볼 수 있었다.

<TilWrapper>
  <TilFlexContainer>
    <Search onSubmit={handleSearchSubmit} />
    {keyword && (
      <SearchResult>
        {data.length === 0 ? (
          <h2>{keyword}에 대한 결과가 없습니다.</h2>
        ) : (
          <h2>{keyword}에 대한 결과입니다.</h2>
        )}
      </SearchResult>
    )}
  </TilFlexContainer>
  {!data && <LoadingImage />}
  <TilList
    currentPage={currentPage}
    totalPages={totalPages}
    startPage={startPage}
    endPage={endPage}
    setCurrentPage={setCurrentPage}
  >
    <TilCardWrapper>
      {data &&
        data.map((data) => (
          <li key={data.tilId}>
            <TilCard data={data} memberId={memberId} />
          </li>
        ))}
    </TilCardWrapper>
  </TilList>
  <MoveButton />
</TilWrapper>