React Spring 기초: useSpring 훅

기존 CSS 애니메이션은 고정된 시간을 사용합니다. 애니메이션이 X밀리초 동안 재생된 후 멈춥니다. 리액트 스프링은 스프링 물리를 사용하여 값을 애니메이션합니다. 애니메이션은 장력(스프링의 강성)과 마찰력(스프링이 움직임에 저항하는 정도)에 의해 구동됩니다. 그 결과 자연스럽게 감속하는 유기적인 느낌의 움직임이 만들어집니다.

useSpring({ from, to }) 훅은 애니메이션 값을 정의합니다. from에 시작 값을 지정하고 to에 목표 값을 지정합니다. useSpring은 각 키가 해당 숫자 또는 색상 값의 애니메이션 버전인 SpringValue인 스프링 객체를 반환합니다.

config 옵션은 스프링 동작을 제어합니다. 장력(기본값 170)은 강성을 제어하며, 값이 높을수록 더 빠르게 튕겨 돌아옵니다. 마찰력(기본값 26)은 감쇠를 제어하며, 값이 낮을수록 더 많이 튕깁니다. 질량(기본값 1)은 관성을 더합니다. 이 세 값이 함께 애니메이션의 특성을 정의합니다.

리액트 스프링에는 별도로 조정하지 않고 사용할 수 있는 사전 설정 구성이 포함되어 있습니다. config.default는 균형 잡힌 범용 설정이고, config.gentle은 느리고 부드러우며, config.wobbly는 마찰력이 낮아 튕기는 효과가 있고, config.stiff는 빠르고 즉각적이며, config.slow는 매우 점진적입니다. 리액트 스프링에서 가져와 사용하십시오.

useSpring이 반환하는 값은 일반 숫자가 아니라 SpringValue 객체입니다. 이러한 값은 JSX에서 직접 렌더링하거나 일반 스타일 객체에서 사용할 수 없습니다. 스프링 업데이트를 구독하고 이를 DOM에 효율적으로 적용하는 방법을 아는 animated.* 구성 요소에 적용해야 합니다.

useSpring에 immediate: true를 전달하면 스프링 애니메이션을 거치지 않고 값이 목표에 즉시 도달합니다. 초기 렌더링 시, 사용자가 OS 설정에서 "동작 줄이기"를 활성화했을 때, 또는 시각적 움직임 없이 프로그래밍 방식으로 위치를 재설정해야 할 때 유용합니다.

from과 to에 어떤 값을 둘지 전환하면 스프링 애니메이션을 되돌릴 수 있습니다. 일반적인 방식은 불리언 전환 상태를 저장하고 그 상태에 따라 시작 값과 목표 값을 계산하는 것입니다. 전환 상태가 false이면 0에서 1로 애니메이션하고, true이면 1에서 0으로 애니메이션합니다. 리액트 스프링은 상태 사이를 부드럽게 전환합니다.

useSpring은 두 요소로 이루어진 배열을 반환할 수 있습니다: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). api 객체를 사용하면 프로그래밍 방식으로 제어할 수 있습니다. api.start({ x: 100 })을 호출하면 새 값으로 애니메이션하고, api.stop()을 호출하면 애니메이션을 정지하며, api.set({ x: 50 })을 호출하면 애니메이션 없이 해당 값으로 즉시 변경합니다.

애니메이션이 정상적으로 변경되는 리액트 상태에 따라 달라질 때는 선언형 형식인 useSpring({ from, to })을 사용합니다. 리액트가 다시 렌더링되지 않게 이벤트 처리기, 제스처 또는 비동기 작업에서 애니메이션을 실행해야 할 때는 api.start()를 사용하는 명령형 형식을 사용합니다.

useSpring의 설정에는 수명 주기 콜백을 지정할 수 있습니다. onStart는 스프링이 애니메이션을 시작할 때 호출됩니다. onChange는 모든 프레임마다 현재 값과 함께 호출되므로 위치를 추적하는 부수 효과에 유용합니다. onRest는 스프링이 최종 값에 도달해 안정되었을 때 호출되며, 애니메이션이 완료되었음을 나타냅니다.

선언형 형식에서는 전달한 값이 변경될 때 useSpring이 애니메이션을 자동으로 다시 실행합니다. 예를 들어 useSpring({ opacity: isVisible ? 1 : 0 })은 isVisible이 변경될 때마다 불투명도를 애니메이션합니다. 이는 스프링 애니메이션을 구성 요소 상태에 연결하는 가장 간단한 방법입니다.

리액트 스프링의 설정에서 tension과 friction은 무엇을 제어하나요?

리액트 스프링은 물리 법칙에 따라 애니메이션합니다. 장력, 마찰력, 질량이 움직임을 결정합니다. useSpring({ from, to })은 SpringValue 객체를 반환하며, 이 객체는 animated.* 구성 요소에 적용됩니다. 부드러운, 흔들리는, 단단한, 느린 프리셋 설정으로 일반적인 경우를 처리할 수 있습니다. 명령형 인터페이스인 [springs, api]를 사용하면 api.start(), api.stop(), api.set()으로 프로그래밍 방식의 제어가 가능합니다. onRest는 애니메이션이 안정되었을 때 호출됩니다.