React/Next.js 환경에서의 GSAP 활용 및 생명주기 관리 (useGSAP)

⚛️ React와 GSAP의 우아한 만남: useGSAP

React 환경(가상 DOM)에서 GSAP(실제 DOM 조작)을 사용할 때는 컴포넌트가 언마운트될 때 진행 중인 애니메이션과 ScrollTrigger를 정리(Cleanup)해 주어야 메모리 누수와 버그를 막을 수 있습니다.

기존에는 useEffect와 gsap.context()를 묶어서 복잡하게 처리했지만, GSAP 공식 React 훅인 @gsap/react (useGSAP)를 사용하면 내부적으로 스코프 격리와 클린업을 완벽하게 자동 처리해 줍니다.

import { useRef } from 'react';
import gsap from 'gsap';
import { useGSAP } from '@gsap/react'; // 공식 React 훅

// Next.js나 React 프로젝트에서 npm install gsap @gsap/react 로 설치

export default function App() {
  const containerRef = useRef(null);

  // useEffect 대신 useGSAP 사용! 클린업(Cleanup) 자동 처리!
  useGSAP(() => {
    // containerRef 스코프 내부에서만 '.box'를 찾습니다.
    gsap.to('.box', { x: 200, rotation: 360, duration: 1 });
  }, { scope: containerRef }); // 의존성 배열과 스코프 지정

  return (
    <div ref={containerRef} className="app">
      <div className="box" style={{ width: 50, height: 50, background: 'blue' }}></div>
      <div className="box" style={{ width: 50, height: 50, background: 'red', marginTop: 10 }}></div>
    </div>
  );
}

실행 결과