React Spring의 useSpring 훅: 생동감 넘치는 애니메이션 만들기 🌱✨

React Spring의 useSpring 훅: 생동감 넘치는 애니메이션 만들기 🌱✨

 

애니메이션은 사용자 경험을 풍성하게 하고, 인터페이스를 더 직관적으로 만들어주는 마법 같은 요소입니다. React Spring은 React 환경에서 애니메이션을 다루기 위한 강력한 라이브러리입니다. 오늘은 그 중심이 되는 useSpring 훅을 다뤄볼게요!

 

1. useSpring이란? 🌟

 

useSpring은 React Spring에서 애니메이션의 기본 단위로 사용됩니다. 이 훅을 사용하면 숫자, 색상, 트랜스폼 등 다양한 속성을 부드럽게 애니메이션 처리할 수 있어요. CSS 기반의 키프레임 애니메이션과 달리, useSpring은 물리 기반 애니메이션을 사용해 더 자연스럽고 직관적인 결과를 제공합니다.

 

2. React Spring 설치하기 📦

 

React Spring을 프로젝트에서 사용하려면 먼저 설치가 필요합니다.

 

npm install @react-spring/web

 

3. useSpring의 기본 사용법 🛠️

 

useSpring은 애니메이션으로 처리할 속성을 설정하고, 이를 컴포넌트에 바인딩하는 방식으로 작동합니다.

 

기본 예제: 부드러운 Opacity 전환

 

import React, { useState } from 'react';

import { useSpring, animated } from '@react-spring/web';

 

function App() {

  const [visible, setVisible] = useState(false);

 

  const styles = useSpring({

    opacity: visible ? 1 : 0,

    transform: visible ? 'scale(1)' : 'scale(0.9)',

    config: { tension: 170, friction: 26 }, // 애니메이션 설정

  });

 

  return (

    <div>

      <button onClick={() => setVisible((prev) => !prev)}>Toggle</button>

      <animated.div style={styles} className="box">

        React Spring!

      </animated.div>

    </div>

  );

}

 

export default App;

 

결과

• 버튼을 클릭하면 텍스트가 부드럽게 나타나거나 사라집니다.

• animated.div는 React Spring에서 제공하는 애니메이션 가능한 컴포넌트입니다.

 

4. 주요 옵션 살펴보기 🔍

 

4.1 config

• 애니메이션의 속도와 움직임을 조정합니다.

• 대표적인 설정:

• tension: 스프링의 힘.

• friction: 스프링의 저항(마찰력).

• mass: 스프링의 질량.

 

config: { tension: 200, friction: 20, mass: 1 }

 

4.2 from

• 애니메이션의 시작 상태를 정의합니다.

 

useSpring({

  from: { opacity: 0 },

  to: { opacity: 1 },

});

 

4.3 loop

• 애니메이션을 반복할 수 있습니다.

 

useSpring({

  to: { opacity: 1 },

  from: { opacity: 0 },

  loop: true,

});

 

4.4 delay

• 애니메이션 시작을 지연시킬 수 있습니다.

 

useSpring({

  to: { opacity: 1 },

  delay: 300,

});

 

5. 복수 속성 애니메이션 🎨

 

useSpring으로 여러 속성을 동시에 제어할 수 있습니다.

 

const styles = useSpring({

  to: {

    opacity: 1,

    transform: 'rotate(0deg)',

  },

  from: {

    opacity: 0,

    transform: 'rotate(180deg)',

  },

  config: { tension: 150, friction: 20 },

});

 

6. 실전 활용: 카드 플립 애니메이션 🃏

 

import React, { useState } from 'react';

import { useSpring, animated } from '@react-spring/web';

 

function CardFlip() {

  const [flipped, setFlipped] = useState(false);

 

  const { transform, opacity } = useSpring({

    opacity: flipped ? 1 : 0,

    transform: `rotateY(${flipped ? 180 : 0}deg)`,

    config: { tension: 120, friction: 14 },

  });

 

  return (

    <div onClick={() => setFlipped(!flipped)} style={{ perspective: 600 }}>

      <animated.div

        style={{

          opacity: opacity.interpolate((o) => 1 - o),

          transform,

          position: 'absolute',

          width: '200px',

          height: '300px',

          backgroundColor: 'blue',

        }}

      >

        Front

      </animated.div>

      <animated.div

        style={{

          opacity,

          transform: transform.interpolate((t) => `${t} rotateY(180deg)`),

          position: 'absolute',

          width: '200px',

          height: '300px',

          backgroundColor: 'red',

        }}

      >

        Back

      </animated.div>

    </div>

  );

}

 

export default CardFlip;

 

결과

• 카드를 클릭하면 앞면과 뒷면이 부드럽게 뒤집힙니다.

 

7. useSpring으로 UX 개선하기 🚀

1. Loading 상태 표현:

• 사용자 작업이 완료될 때까지의 진행 상황을 부드럽게 나타낼 수 있습니다.

 

const styles = useSpring({

  width: progress + '%',

  background: 'linear-gradient(to right, #f06, #f90)',

});

 

 

2. Hover 애니메이션:

• 사용자 인터랙션에 즉각적인 피드백을 제공합니다.

 

const styles = useSpring({

  scale: hovered ? 1.1 : 1,

});

 

 

3. 페이지 전환 효과:

• useSpring을 활용해 페이지 컴포넌트를 자연스럽게 교체할 수 있습니다.

 

8. useSpring과 useTransition 비교 🔄

 

Feature useSpring useTransition

목적 개별 애니메이션 목록/배열 기반의 애니메이션

제어 방식 하나의 상태 애니메이션 처리 항목 추가/제거 애니메이션

사용 예 위치 이동, 상태 변화 리스트 렌더링

 

9. 마무리하며: React Spring으로 만드는 부드러운 세상 🌈

 

useSpring은 애니메이션을 단순히 보기 좋은 요소로 만드는 것을 넘어, 사용자 경험(UX)을 혁신적으로 개선하는 도구입니다. 이제 여러분의 애플리케이션에 React Spring을 더해 인터랙션의 마법을 선보여 보세요!

 

🌷전설의 개발자가 되어봅시당!🌷