ReactJS / NextJS에서의 GSAP 설정

문제점 인식

NextJS의 환경에서 GSAP을 사용하는 경우, 잦은 Hydration Error(NextJS)를 마주하게 된다. 나아가, styled-components를 사용할 경우 문제점은 배가 된다.

현재 이에 대한 자료가 부족하며, 존재하는 자료마저 예전의 자료이다.
따라서, NextJS나 ReactJS에서 GSAP을 학습하는 과정과 직면한 문제점, 이에 대한 해결책을 남겨놓고자 한다.

---

의존성 모듈 설치

npm i gsap

---

기본 컨셉

gsap은 className이나 id, ref를 이용해 원하는 컴포넌트를 설정한 뒤, 적용할 Animation을 Object로 넘겨주는 방식이다.

---

문제점1 : Hydration Error

SSR방식을 채택하는 NextJS의 경우, 컴포넌트에 className을 부여하는 시점이 CSR과 다르다. 따라서, CSR방식(ReactJS)을 주로 지원하는 라이브러리를 사용할 경우, 바로 문제가 발생하게 된다.

물론, className이나 id, ref를 쓰지 않고 사용하는 방법도 있다. 이는 아래와 같다.

---

mouseEvent

import gsap from 'gsap';

const App = () => {
  const clickHandler = ({ currentTarget }) => {
    gsap.from(currentTarget, {
      duration: 0.2,
      scale: 1.2,
    });
  };

  return <div onClick={clickHandler}></div>;
};

class, ref, id를 사용하지 않아 Hydration Error가 발생하지 않았다.
하지만, event만으로는 세부 컴포넌트의 애니메이션을 조작하는데 한계가 있어, className을 필연적으로 사용해야 한다.

---

className 사용

import gsap from 'gsap';

function App() {
  const onEnter = ({ currentTarget }) => {
    gsap.to(currentTarget, { backgroundColor: '#e77614', scale: 1.2 });
  };

  const onLeave = ({ currentTarget }) => {
    gsap.to(currentTarget, { backgroundColor: '#28a92b', scale: 1 });
  };

  return (
    <div>
      <div className="box" onMouseEnter={onEnter} onMouseLeave={onLeave}>
        Hover Me
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

---

NextJS에서의 Hydration Error

이러한 GSAP의 컨셉은 ReactJS에서는 큰 문제가 없다.
하지만, NextJS의 경우 SSR을 위해 className이 추후에 부여되기 때문에 이벤트핸들러의 콜백 매개변수(event.currentTarget)를 제외한 useRef나 className, styled-components를 이용할 경우 Hydration Error를 마주하게 된다.