[motion] React에서 useScroll 훅 가이드 - 옵션과 사용법 정리

useSpring은 스프링 애니메이션을 구현하는 데 사용되는 훅입니다. 이 훅은 값을 변경할 때 자연스러운 스프링 물리 효과를 적용하여 부드러운 애니메이션을 제공합니다. useSpring의 사용 방법과 설정 옵션을 공식 문서를 바탕으로 정리해 보겠습니다.

사용 방법

1. 직접적인 값 설정

• useSpring을 초기 값과 함께 사용하여 스프링 애니메이션을 생성할 수 있습니다.
• 예: const x = useSpring(0)와 같이 초기 값을 설정하고, x.set(100)으로 값을 변경하면 스프링 애니메이션으로 100으로 전환됩니다.
• 즉시 값을 변경하고 싶다면 x.jump(100)을 사용할 수 있습니다.

2. 다른 모션 값 추적

• 다른 모션 값을 전달하여 그 값이 변경될 때마다 스프링 애니메이션을 적용할 수 있습니다.
• 예: const x = useMotionValue(0), const y = useSpring(x)와 같이 설정하면 x의 값이 변경될 때마다 y가 자연스럽게 따라갑니다.

스프링 애니메이션 설정

useSpring은 스프링 애니메이션의 속도와 부드러움을 조절할 수 있는 다양한 설정을 제공합니다. 주요 설정 옵션은 다음과 같습니다:

• stiffness: 스프링의 강성을 조절합니다. 값이 높을수록 스프링이 더 강해져 빠르게 반동합니다.
• damping: 스프링의 감쇠를 조절합니다. 값이 높을수록 반동이 줄어듭니다.
• mass: 스프링의 질량을 조절합니다. 기본값은 1입니다.

예제

import { useSpring } from "motion/react";

function MyComponent() {
  const x = useSpring(0, { stiffness: 300, damping: 20 });

  // 스프링 애니메이션으로 100으로 전환
  x.set(100);

  // 즉시 100으로 이동 (애니메이션 없이)
  // x.jump(100);

  return (
    <div style={{ transform: `translateX(${x}px)` }}>
      Animated Box
    </div>
  );
}

또 다른 예제로, 다른 모션 값을 추적하는 방법을 보여드리겠습니다:

import { useMotionValue, useSpring } from "motion/react";

function MyComponent() {
  const x = useMotionValue(0);
  const y = useSpring(x, { stiffness: 300, damping: 20 });

  // x의 값을 변경하면 y가 자연스럽게 따라갑니다.
  x.set(100);

  return (
    <div style={{ transform: `translateX(${y}px)` }}>
      Animated Box
    </div>
  );
}

이 예제에서는 useMotionValue로 초기 값을 설정하고, useSpring으로 그 값을 추적하여 스프링 애니메이션을 적용합니다.

추가 정보

• Transition Options: 스프링 애니메이션의 유형을 정의할 수 있습니다. 예를 들어, useSpring(0, { stiffness: 300 })와 같이 설정할 수 있습니다.
• Methods:
  • set(target): 스프링 애니메이션으로 값을 변경합니다.
  • jump(target): 즉시 값을 변경합니다. 애니메이션 없이 이동합니다.

이러한 방법으로 useSpring을 활용하여 자연스러운 스프링 애니메이션을 구현할 수 있습니다.