[React-Spring 공식 문서로 배우기] useSpring

현재 React-Spring에는 5가지 Hook이 있다.

• useSpring : Data를 a 에서 b로 이동시키는 단일 Spring이다.
• useSprings : 다중 Spring으로 List와 같이 각각의 Spring이 움직이는 데이터를 다룰 때 사용된다.
• useTrail : 하나의 데이터셋으로 다중 Springs을 구동시키며, Spring은 그를 따르거나 다른 것들을 이끈다.
• useTransition : mount/unmount를 다룬다.
• useChain : 다량의 애니메이션을 함께 동반할 때 사용된다.

useSpring

가장 쉬운 것은 useSpring이다.

하지만 다른 것들도 이 useSpring에 기반한 동작을 수행하기 때문에 중요하다.

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

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

과 같이 사용될 수 있는데, 차근차근 단계로 알아보자.

import

import {useSpring, animated} from "react-spring";

props 넘기는 방법 (업데이트 방법)

animated-values를 넘기는 방법에는 3가지가 있다.

1. 값 덮어쓰기
2. 값을 리턴하는 함수 넘기기
3. 애니메이션 props로 전달하기.

값 덮어쓰기

const props = useSpring({opactiy: toggle ? 1: 0})

만약 컴포넌트를 변경된 props를 통해 re-render 한다면 animation은 업데이트 된ㄷ.

함수 넘기기

const [props, set, stop] = useSpring(() => ({opacity: 1}))
set({opacity: toggle ? 1 : 0})
stop()

value를 return 하는 함수를 전달하고 set을 이용해서 업데이트 할 수 있다.

 

이런 방식으로 구성하면 위의 방법처럼 렌더링되지 않는다. (렌더링 되지 않는다는 소리가 애니메이션이 실행되지 않는다는 소리는 아님)

 

이와 같은 업데이트ㅡㄹ 처리하는 것은 빠르게 발생하는 업데이트에 유용하고 이를 선호해야 한다고 한다.

 

선택적으로 stop()함수와 같은 정지 함수가 올 수 있다.

props 이용하기

return <animated.div style={props}>I WILL FADE</animated.div>