2022.01.28(Fri.) <React 스크롤에 따른 이벤트 만들기>

스크롤 할 때마다 움직입니다.

1. 문제의 발단

개발을 처음 시작했을 때 스터디원들과 참고할 만한 사이트 같은걸 찾다가 들어가 본 Airpods pro 사이트는 정말 지금 봐도 놀랍다. 디자인 UX 전부 완벽한 것 같다. 어쨌든 저런 스크롤 이벤트를 알아보고 나도 걸음마는 때 보려고 한다.

2. 어떻게 하나요?

1. useState를 이용해 state 값으로 스크롤 수치를 만든다.

   • import React, { useState } from "react";
     
     const [scrollPosition, setScrollPosition] = useState(0);
     
     function Page {
         <div>
     		<div>스크롤되면 색이 변합니다!</div>
         </div>
     }

2. Handler 함수를 만들고, useEffect로 스크롤 수치를 계속 업데이트한다.

   • import React, { useState, useEffect } from "react";
     
     const [scrollPosition, setScrollPosition] = useState(0);
     
     const updateScroll = () => {
             setScrollPosition(window.scrollY || document.documentElement.scrollTop);
         };
     
     useEffect(() => {
             window.addEventListener("scroll", updateScroll);
         }, []);
     
     function Page {
         <div>
     		<div>스크롤되면 색이 변합니다!</div>
         </div>
     }

3. className을 삼항 연산자로 원하는 수치만큼의 스크롤이 되면 바꿔주게 만든다.

   • import React, { useState, useEffect } from "react";
     
     const [scrollPosition, setScrollPosition] = useState(0);
     
     const updateScroll = () => {
             setScrollPosition(window.scrollY || document.documentElement.scrollTop);
         };
     
     useEffect(() => {
             window.addEventListener("scroll", updateScroll);
         }, []);
     
     function Page {
         <div>
     		<div className={scrollPosition > 100 ? "scroll-text" : "scrolled-text"}>스크롤되면 색이 변합니다!</div>
         </div>
     }

   • .scroll-text {
         font-size: 5rem;
         transition: 1.5s;
     }
     
     .scrolled-text {
         font-size: 5rem;
         color: red;
         transition: 1.5s;
     }

3. 결과물

위에 css에 설정해 둔 것 처럼, 빨간색으로 변합니다.