[React] Window.ScrollTo - 스크롤의 위치를 이동

 

 

최근 토이프로젝트로 쇼핑몰을 만들면서 페이지 이동 시에 항상 최상단에 스크롤이 위치하게끔 구현하였다.

 

 

1. Window.scrollTo() 는?

---

스크롤을 이동시키는 방법에는 두 가지가 있다.

첫번째로는 x축, y축의 좌표만을 설정해서 변경하는 방법으로 아래와 같이 쓰인다.

window.scrollTo(x축, y축)

// 문서의 왼쪽 상단을 기준으로 x축은 가로축, y축은 세로축

두번째로는 option 값에 좌표 및 효과를 설정해서 변경하는 방법으로 아래와 같이 쓰인다.

window.scrollTo(option)

// option 값 - top: 세로위치, left: 가로위치, behavior: 스크롤 효과(smooth, instant, auto)

 

 

2. 페이지 이동 시 최상단에 위치시키기

---

아래 코드처럼 scrollToUp() 함수를 export 하여 App.tsx 에 import 해주었다.

이 경우에는 위치가 최상단이기 때문에 따로 좌표값을 구해주지 않고 x축/y축 값을 0으로 설정해주면 페이지 이동 시 스크롤이 최상단으로 이동이 가능하다.

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function scrollToUp() {
  const { pathname } = useLocation();
  // 현재 페이지의 정보

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
  // 현재 페이지 정보에 변화가 있을 때마다 처리

  return null;
}

scrollTo 적용 전

scrollTo 적용 후

 

 

3. 특정 위치로 스크롤을 이동시키기 (useRef / scrollIntoView)

---

추가로 최상단이 아닌 사용자가 특정 행동을 했을 때 특정 위치로 스크롤을 이동시키는 방법도 알아보았다.

Javascript의 경우라면 querySelector, offsetTop, offsetLeft 를 이용하여 좌표 위치를 변수로 사용해 위와 같이 option 값에 넣어서 사용가능하다.

하지만 React 에서는 Virtual DOM을 통해 Real DOM을 그리기 때문에 DOM을 직접 건드리는 DOM Selector를 자주 사용하는 것을 지양하도록 권장한다고 한다. 그래서 useRef 를 사용했다.

 

1. useRef()로 이동하고자 하는 요소 선택

2. scrollIntoView()로 호출된 요소까지 스크롤을 이동

import { useRef } from "react";

export default function ScollToRef() {
  const divRef = useRef(null);

  const scrollToRef = () => {
    divRef.current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div>
      <button onClick={scrollToRef}>버튼</button>
      <hr />
      <div ref={divRef}>요기로 와!</div>
    </div>
  );
}

 

 

4. 후기

---

특정 위치로 이동시키는 방법은 웹사이트의 페이지 단위가 커진다면 매우 유용하게 쓰일 수 있을 것같다고 느꼈다.

두 가지 경우 모두 자주 쓰이면서 유용한 로직을 공부할 수 있는 기회였다.