[React] 현재 스크롤 위치 얻기

 

오늘은 React에서 현재 스크롤의 위치를 얻는 방법에 대해 알아보자. 

 

필자는 작업 중이던 애플리케이션에서 숫자가 1에서 350으로 점차 증가하는 애니메이션을 추가했는데 문제는

 

해당 컴포넌트가 페이지의 맨 아래에 위치했기 때문에 유저가 스크롤을 다 내렸을 때에는 이미 애니메이션이 모두 끝난 이후였다. 

 

따라서 현재 스크롤의 위치를 파악하여 특정 위치에 도달하면 애니메이션을 시행하는 로직이 필요했다. 

 

코딩 초보에게 스크롤의 위치파악이란 다소 어렵게 느껴질 수 있다. 

 

하지만 겁먹지 말자. 웹 어플을 만드신 천상계 개발자 분들이 이미 window 객체 안에 관련 데이터를 얻을 수 있도록 

 

여러 가지 객체를 담아놓았다. (감사합니다 ㅠㅠ)

 

아래 코드는 현재 Y축 스크롤 위치를 알려주는 착한 프로퍼티인데, window 객체에 있다. 

 

 

window.pageYOffset

 

현재 위치를 얻는 방법은 알았으니 이제 남은 것은

 

"어떻게 스크롤을 내릴 때마다 현재의 위치를 체크하는가"이다.

 

useEffect와 useState를 이용하면 쉽게 해결 가능하다. 

 

import { useEffect, useState } from "react";

export default function App() {
  const [scrollPosition, setScrollPosition] = useState(0);
  const handleScroll = () => {
    const position = window.pageYOffset;
    setScrollPosition(position);
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

 

위처럼 scrollPosition을 state로 선언 할당하고

 

useEffect로 window에 scroll이 발생할 때마다 handleScroll 함수가 작동되는 이벤트 리스너를 붙여준다. 

 

마지막으로 handleScroll 함수는 state값을 변경해주면 끝!

 

참쉽쥬?