[React-spring] 리액트스프링 라이브러리 시작하기

React-spring 이란?

---

 

React-spring은 React에서 자연스러운 애니메이션과 인터랙션을 구현할 수 있는 라이브러리입니다. 기존 CSS나 React Transition Group을 사용하는 방법과는 달리 더 많은 자유도와 다양한 설정 옵션을 제공하며, 성능 측면에서도 우수한 성능을 보여줍니다.

 

---

React-spring 장점

 

 

1. 다양한 애니메이션 효과를 쉽게 구현할 수 있다.

React-spring은 각각의 속성을 정확하게 제어할 수 있어 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다. 예를 들어, position, scale, opacity 등 다양한 속성을 다룰 수 있습니다.

 

 

2. 자연스러운 애니메이션 구현이 가능하다.

React-spring은 애니메이션의 시작점과 끝점을 정확하게 제어할 수 있기 때문에 자연스러운 애니메이션을 구현할 수 있습니다. 또한, 물리학적인 계산을 이용해 더욱 자연스러운 애니메이션을 만들어낼 수 있습니다.

 

 

3.React와의 호환성이 뛰어나다.

React-spring은 React와 함께 사용할 수 있도록 설계되었습니다. 이를 통해 React의 상태 관리 기능을 활용해 React-spring의 애니메이션을 조작할 수 있으며, React-spring의 애니메이션 결과 역시 React의 컴포넌트 상태에 적용할 수 있습니다.
성능이 우수하다.
React-spring은 최적화된 알고리즘을 사용하여 성능이 우수합니다. 또한, 애니메이션의 업데이트 시에는 필요한 속성만 업데이트되어 성능 저하가 발생하지 않습니다.

 

 

React-spring은 이처럼 다양한 장점을 제공하며, React에서 자연스러운 애니메이션과 인터랙션을 구현할 때 유용하게 활용될 수 있습니다.

---

 

React-spring 사용방법 

 

1. 라이브러리 설치

 

프로젝트 내부에 npm으로 설치 가능합니다.

 

 

2. 애니메이션 구성 및 기초적인 사용 방법

 

React Spring은 다양한 애니메이션 구성을 지원합니다. 

대표적으로 useSpring, useTransition, useTrail, useChain 등이 있습니다. 이 중에서 useSpring을 이용하여 간단한 애니메이션을 구성해보겠습니다.

정말 제일 간단한 예제를 하나로 리액트 스프링 시작하기 글을 마치겠습니다.

import { useSpring, animated } from 'react-spring'; // 2-1

function App() {
  const animation = useSpring({ // 2-2
  	from : { opacity : 0 }
    	to : { opacity : 1 }
        config : { duration : 500 }
  });
  return (
  	<animated.div style={animation}> //2-3
    	Hello, world!
    </animated.div>;
    )
}
...

2-1. import 선언

 

- 'react-spring' 으로 부터 useSpring 과 animated 를 import 를 합니다.

 

 

2-2 useSpring의 hook을 통한 animation 변수 선언

 

- 변수 선언을 useSpring의 파라미터를 통해 animation 의 효과를 작성합니다. 

- 정말 다양한 제어가 가능한 hook의 파라미터들이 존재하지만 제일 기초적이고 usespring의 틀이 되어주는 from, to, config를 통해  제어를 해보겠습니다.

각 파라미터 속성 에 대해 간단히 설명 드리곘습니다.

 

• from: 애니메이션 시작 시 갖고 있는 애니메이션 효과
• to: 애니메이션 종료 시 갖고 애니메이션 효과
• config : animation 과정의 속도 , 타이밍 , 움직임 등을 조절하는데 사용 
• duration : from(시작) 과 to(끝) 사이의 애니메이션 변화 되는 시간

 

 

2-3. animation 을 적용할 태그 설명

 

위에 예제 같은 경우 <div></div> 에 <animated.div></animated.div>를 붙혀 적용할 태그를 선택하였고,

style 속성에 animation 을 적용 style={animation} 을 하였습니다.

 

 

이후 동작을 확인해 보면 

 

랜더링 이후 Hello World 라는 글자는 0.5초의 간격을 가지고 opacity의 css속성이 0 > 1 로 바뀌는 과정을 확인 하실 수 있습니다.

 

opacity 뿐만이 아닌 우리가 알고 있는 다양한 css 효과를 작성이 가능합니다 

 

 

후기

---

저는 더 사용 해보긴 했지만 조금만 익숙해진다면 간단하게 생동감있는 페이지를 만들 수 있겠다라는 생각을 하였습니다. 

저도 활용을 하면서 useSpring을 사용하는 방법을 앞으로도 포스팅 할 계획입니다.

오늘은 정말 기본적인 사용법만 하고 하나하나 더 직접 체험하고 풀어보겠습니다 

감사합니다.