[React] 스크롤 애니메이션, IntersectionObserver + styled-components

📒 React 스크롤 애니메이션 구현하기

---

사용자의 눈길을 끌기 위해 다양한 방법들이 사용 되는데,
그 중에서도 가장 눈에 띄던 것이 스크롤 애니메이션이었습니다.

 

실제 사이드 프로젝트에서 구현한 모습은 다음 링크에서 확인할 수 있습니다.

링모(LINGMO) - 당신의 링크 모음

 

직접 구현해보니 생각했던 만큼 어렵지도 않았던 스크롤 애니메이션을 React로 간단하게 구현해본 후
hook으로 분리해 재사용이 용이하도록 개선한 코드를 소개합니다.

 

📌 라이브러리로 쉽게 구현하기

[React] 리액트 스크롤 애니메이션 라이브러리 개발

스크롤 애니메이션 기능을 쉽고 빠르게 구현하고 싶으신 분들은 위 글을 참고해주세요!

 

📌 IntersectionObserver

IntersectionObserver은 JavaScript의 API 중 하나로,
요소가 뷰포트(화면)에 나타나거나 사라질 때를 감지하는 역할을 합니다.

 

이를 통해 스크롤, 레이지 로딩(lazy loading), 무한 스크롤(infinite scrolling) 등
다양한 상황에서 요소들을 감지하고 트리거하는데 유용하게 사용할 수 있습니다.

 

아래는 간단하게 구현해본 예제입니다.

 

 

📌 styled-components로 애니메이션 구현

우선 IntersectionObserver를 설명하기 앞서 실질적으로 요소에 애니메이션 효과를 적용하는 부분을
styled-component로 구현한 코드 먼저 보겠습니다.

import styled, { keyframes } from "styled-components";

const frameInAnimation = keyframes`
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  100%{
    opacity: 1;
    transform: translateX(0%);
  }
`;

export const Container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;

  &.frame-in {
    animation: ${frameInAnimation} 2s forwards;
  }
`;

styled-components의 keyframes로 투명도와 위치가 이동하는 애니메이션을 작성합니다.

 

그 후 애니메이션이 적용될 div 태그에 원하는 layout을 잡아주고
&.을 이용해 frame-in이란 className이 적용되면 애니메이션 효과가 작동하게 해줍니다.

 

animation 속성에는 위에서 작성한
애니메이션 이름(animation-name)과 더불어
애니메이션 시간(animation-duration),
애니메이션 값 적용(animation-fill-mode)를 넣어주었습니다.

 

이 중에서도 animation-fill-mode 는 속성은 애니메이션이 끝난 후의 상태를 설정합니다.

 

이 속성은 다음과 같은 값을 가질 수 있는데 forwards를 부여해 애니메이션의 종료될 때의 상태가 계속 지속되도록 합니다.

• none
  애니메이션이 끝난 후 상태를 설정하지 않습니다.
• forwards
  애니메이션이 끝난 후 그 지점에 그대로 있습니다.
• backwards
  애니메이션이 끝난 후 시작점으로 돌아옵니다.
• both
  애니메이션이의 앞 뒤 결과를 조합하여 설정합니다.
• inherit
  애니메이션의 상태를 상위 요소한테 상속받습니다.

 

📌 React에 IntersectionObserver 적용

import { useState, useRef, useEffect } from "react";
import { Container } from "./styled";

export default function App() {
  const [isInViewport, setIsInViewport] = useState(false);
  const ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!ref.current) return; // 요소가 아직 준비되지 않은 경우 중단

    const callback = (entries: IntersectionObserverEntry[]) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 요소가 뷰포트에 나타났을 경우
          setIsInViewport(true);
        } else {
          // 요소가 뷰포트를 벗어난 경우
          setIsInViewport(false);
        }
      });
    };

    const options = { root: null, rootMargin: "0px", threshold: 0 };

    const observer = new IntersectionObserver(callback, options);
    observer.observe(ref.current); // 요소 관찰 시작

    return () => {
      observer.disconnect(); // 컴포넌트 언마운트 시 관찰 중단
    };
  }, []);

  return (
    <>
      <Container>
        <h1>아래로 스크롤 하세요</h1>
      </Container>
      <Container className={isInViewport ? "frame-in" : ""} ref={ref}>
        <h1>안녕하세요</h1>
      </Container>
    </>
  );
}

useEffect를 이용해 IntersectionObserver의 객체(observer)가 ref를 감지해서 callback을 트리거하는 코드입니다.

 

작동하는 순서를 따지자면 다음과 같습니다.

 

1. observer가 스크롤을 감지하고 callback 호출
2. callback의 entry에서 사용자의 viewport에 ref를 적용한 Container가 진입했는지 여부 판단
3. 만약 진입하지 않았다면 isInViewport 상태를 false로 set,
   진입했다면 true로 set
4. isInViewport가 true가 되면 Container의 className에 frame-in을 삽입
5. 애니메이션 작동

위 코드에서 useEffect 내 스크롤 감지를 위한 요소들의 기능과 의미는 다음과 같습니다.

 

🔎 IntersectionObserverEntry

IntersectionObserverEntry는 IntersectionObserver의 콜백 함수 내에서
각 관찰 대상 요소의 가시성 정보를 담고 있는 객체이며 중요한 속성은 다음과 같습니다.

• isIntersecting
  관찰 대상 요소가 현재 뷰포트 내에 보이는지 여부를 나타냅니다. Boolean 값으로 반환됩니다.
• intersectionRatio
  관찰 대상 요소와 뷰포트의 교차 영역의 비율을 나타냅니다.
  이 값은 0부터 1까지의 범위를 가지며, 0은 교차 영역이 없음을, 1은 관찰 대상 요소가 완전히 뷰포트 내에 있음을 의미합니다.

 

🔎 IntersectionObserver의 options

const options = { root: null, rootMargin: "0px", threshold: 0 };
const observer = new IntersectionObserver(callback, options);

IntersectionObserver의 객체를 생성하는 생성자에 들어가는 options 인자의 값들은 다음과 같은 의미를 지니고 있습니다.

1. root
   • 이 옵션은 뷰포트를 기준으로 관찰할 대상 요소들을 선택하는 역할을 합니다.
   • 기본값은 null로, 뷰포트 전체가 관찰 대상이 됩니다.
   • 다른 DOM 요소를 지정하여 해당 요소 내에서의 가시성을 감지하도록 설정할 수 있습니다.
2. rootMargin
   • 루트 요소와 타겟 요소 사이의 여백(마진)을 설정합니다.
   • 값은 CSS의 마진 값과 동일한 형식으로 지정하며, "top right bottom left" 순서입니다.
   • 마진 값을 통해 요소가 뷰포트 내에 들어올 때 얼마나 이전에, 또는 나갈 때 얼마나 나가기 전에 가시성을 감지할지를 조절할 수 있습니다.
3. threshold
   • 타겟 요소의 가시성을 판단하는 기준으로, 값은 0부터 1 사이의 소수점 숫자입니다.
   • 기본값은 0으로, 타겟 요소가 뷰포트에 조금이라도 들어오면 isIntersecting이 true가 됩니다.
   • 값이 커질수록 타겟 요소가 뷰포트 내에서 더 많은 비율을 차지해야 가시성이 확인됩니다.

 

📌 IntersectionObserver를 사용할 때 고려해야 할 사항

정말 편리하게 요소들을 감지할 수 있도록 기능을 제공하는 IntersectionObserver이지만
다음과 같은 사항들을 고려하며 적용해봐야 합니다.

• 브라우저 지원
  IntersectionObserver는 대부분의 현대 브라우저에서 지원되지만, 오래된 브라우저에서는 지원되지 않을 수 있습니다. 이 때문에 크로스 브라우징을 고려해야 합니다. 필요하다면 폴리필(polyfill)을 사용하여 미지원 브라우저에서도 사용할 수 있도록 할 수 있습니다.
• 렌더링 성능
  IntersectionObserver를 사용하여 요소의 가시성을 감지하면서 자주 실행되는 콜백 함수는 렌더링 성능에 영향을 줄 수 있습니다. 따라서 적절한 threshold 값을 설정하여 콜백 함수가 불필요하게 자주 실행되지 않도록 조절해야 합니다.
• 콜백 함수 비용
  IntersectionObserver의 콜백 함수 내에서 실행되는 코드가 무거운 경우,
  뷰포트 내 요소의 가시성 변경 시 성능 저하가 발생할 수 있습니다.
• 메모리 누수
  IntersectionObserver의 콜백 함수에서 메모리 누수가 발생하지 않도록 주의해야 합니다.
  콜백 함수 내에서 외부 변수를 사용할 경우 클로저(closure) 문제에 유의해야 합니다.
• 동적 변경: DOM 요소가 동적으로 생성되거나 변경될 경우, 해당 요소의 가시성을 올바르게 감지할 수 있도록 IntersectionObserver를 업데이트해야 할 수 있습니다.
• 요소 크기
  가시성을 판단하는 데 기준이 되는 요소의 크기가 작거나 없을 경우, 정확한 가시성을 감지하기 어려울 수 있습니다.
• 서버 사이드 렌더링(SSR)
  서버 사이드 렌더링을 사용하는 경우,
  IntersectionObserver는 브라우저 환경에서만 작동하므로 클라이언트 사이드에서만 사용하도록 주의해야 합니다.

 

📌 hook과 컴포넌트로 분리하기

아무래도 위 예제 같은 방법으로 실제 프로젝트에 적용하기에는 몇 가지 불편한 점이 있었습니다.

1. useEffect 사용으로 인한 컴포넌트 코드 라인 증가 및 가독성 저하
2. 애니메이션 적용 요소마다 늘어나는 ref와 useEffect

이를 해결하기 위해 위 불편 사항들을 개선하고 ScrollAnimation을 담당해서 처리할 hook을 만들었습니다.

 

hook에서 ref를 배열로 만들어 여러 요소들을 한꺼번에 관리하는 방법도 구현해 봤는데
불변성 때문에 로직이 불필요하게 복잡해지고 가독성도 좋지 않아져 컴포넌트 방식으로 만들어봤습니다.

 

🔎 useScrollAnimation.ts

import { useRef, useState, useEffect } from "react";

export const useScrollAnimation = () => {
  const [isInViewport, setIsInViewport] = useState(false);
  const ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!ref.current) return; // 요소가 아직 준비되지 않은 경우 중단

    const callback = (entries: IntersectionObserverEntry[]) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 요소가 뷰포트에 나타났을 경우
          setIsInViewport(true);
        } else {
          // 요소가 뷰포트를 벗어난 경우
          setIsInViewport(false);
        }
      });
    };

    const options = { root: null, rootMargin: "0px", threshold: 0 };

    const observer = new IntersectionObserver(callback, options);
    observer.observe(ref.current); // 요소 관찰 시작

    return () => {
      observer.disconnect(); // 컴포넌트 언마운트 시 관찰 중단
    };
  }, []);

  return { isInViewport, ref };
};

위에서 봤던 스크롤 감지 로직을 그대로 hook으로 분리했습니다.

hook에서 ref와 animation 적용 여부를 판단하는 로직과 상태를 선언하고 return 해줍니다.

 

🔎 ScrollAnimationContainer.tsx

import { Container } from "./styled";
import { useScrollAnimation } from "./useScrollAnimation";

type PropsType = {
  children: React.ReactNode;
};

export const ScrollAnimationContainer = ({ children }: PropsType) => {
  const { ref, isInViewport } = useScrollAnimation();
  return (
    <Container ref={ref} className={isInViewport ? "frame-in" : ""}>
      {children}
    </Container>
  );
};

그 다음 useScrollAnimation 훅을 이용해 children을 감싸주기만 하면 애니메이션이 적용되는 컴포넌트를 만들어줍니다.

 

🔎 컴포넌트 사용

import { ScrollAnimationContainer } from "./ScrollAnimationContainer";
import { Container } from "./styled";

export default function App() {
  return (
    <>
      <Container>
        <h1>아래로 스크롤 하세요</h1>
      </Container>

      <ScrollAnimationContainer>
        <h1>안녕</h1>
      </ScrollAnimationContainer>

      <ScrollAnimationContainer>
        <h1>하세요</h1>
      </ScrollAnimationContainer>

      <ScrollAnimationContainer>
        <h1>반갑습니다</h1>
      </ScrollAnimationContainer>
    </>
  );
}

위에서 모든 로직을 처리해주는 컴포넌트를 만들어둔 덕분에
요소들을 간편하게 wrapping 하기만 해도 스크롤 애니메이션이 적용되는 모습을 확인할 수 있습니다.

 

그럼 자세한 코드와 구조는 위에 올려둔 CodeSandBox를 참고해주시고
스크롤 애니메이션을 적용해 더 동적인 웹을 개발해봐야겠습니다.