react-spring 공식문서 겉핥기

react-spring

react-spring 은 애니메이션 라이브러리이고, 대부분의 UI 애니메이션을 지원합니다.

해당 라이브러리는 animated 와 react-motion 라이브러리에 영감을 받아 제작되었다고 합니다. animated의 강력한 퍼포먼스라는 장점과 react-motion의 간단한 사용법의 장점이 합쳐져 제작되었습니다.

왜 duration이 아니라 spring인지?

스프링(용수철)은 정의된 곡선이나 지정된 지속시간으로 설정되지 않는다. 우리는 애니메이션이 곡선과 시간으로 이루어진다고 생각하지만, 현실에서 그렇게 움직이는 것은 없다. 화면상의 요소들을 자연스럽게 움직이려고 할 때 우리가 직면하게 되는 대부분을 Struggle 하게 될 것이다. 우리는 시간 기반 애니메이션에 너무 익숙해서, 이 모든 것을 동기화시키는 것은 말할 것도 없고, arbitrary curves, easings, time waterfalls를 다루는 Struggle은 정상이라고 생각한다.

스프링은 그것을 변화시키고, 애니메이션은 쉽고 접근하기 쉬워지며, 당신이 하는 모든 일은 기본적으로 자연스러워 보이고 느껴지게 된다.

https://www.youtube.com/watch?v=1tavDv5hXpo&t=396s

설치

yarn add react-spring

따라해보기

useSpring

import { useSpring, animated } from 'react-spring'

function App() {
  const props = useSpring({ to: { opacity: 1 }, from: { opacity: 0 } })
  return <animated.div style={props}>I will fade in</animated.div>
}

useSpring Hook을 이용해 애니메이션을 적용할 수 있습니다.

from에서 to로 진행하는 애니메이션을 생성합니다.

props

제목 없음

이외에도

useChain, useSprings, useTrail, useTransition Hook이 있습니다.

useChain

useChain은 하나의 애니메이션이 시작되면 다른 애니메이션도 순차적으로 진행되는 연쇄작용을 합니다.

// Build a spring and catch its ref
const springRef = useSpringRef()
const props = useSpring({ ...values, ref: springRef })
// Build a transition and catch its ref
const transitionRef = useSpringRef()
const transitions = useTransition({ ...values, ref: transitionRef })
// First run the spring, when it concludes run the transition
useChain([springRef, transitionRef])
// Use the animated props like always
return (
  <animated.div style={props}>
    {transitions(styles => (
      <animated.div style={styles} />
    ))}
  </animated.div>
)

useSprings

여러 개의 Spring으로 각각의 Spring을 적용시키고 싶을 때 사용합니다.

const springs = useSprings(
  number,
  items.map(item => ({ opacity: item.opacity }))
)

useTrail

여러 개의 Spring을 하나의 애니메이션으로 적용시키고, 각각의 Spring은 이전 Spring의 애니메이션을 따라하게 된다.

useTransition

생명주기와 관련된 Hook으로 mount 될 때, unmount 될 때에 대한 애니메이션을 적용시킬 수 있다.

 

 

ref :

https://react-spring.io/basics