애니메이션 컴포넌트와 스타일 보간

리액트 스프링은 모든 HTML 요소의 animated 버전을 제공합니다. 예를 들어 animated.div, animated.span, animated.img, animated.button 등이 있습니다. 이들은 기본 요소를 바로 대체해 사용할 수 있으며, 한 가지 중요한 차이점이 있습니다. 스타일 속성으로 SpringValue 객체를 받을 수 있다는 점입니다.

일반 리액트 요소는 정적인 값이 담긴 일반 객체로 스타일을 받습니다. SpringValues는 리액트의 재렌더링 주기를 거치지 않고 모든 애니메이션 프레임마다 업데이트되는 특수한 객체입니다. animated.* 구성 요소만 SpringValue 업데이트를 구독하고 DOM 스타일을 직접 변경하는 방법을 알고 있으므로, 최대 성능을 위해 리액트를 완전히 우회할 수 있습니다.

animated 구성 요소의 CSS 스타일 속성으로 스프링 값을 직접 적용합니다. 예를 들어 style={{ opacity: opacity, transform: transform }}에서 opacity와 transform은 useSpring이 반환한 SpringValue입니다. animated.div는 각 RAF(requestAnimationFrame) 틱마다 이 값을 읽고 DOM 노드에 적용합니다.

SpringValue에는 출력을 변환하는 .to() 메서드가 있습니다. 일반적인 사용 사례는 숫자로 된 스프링 값을 CSS 문자열로 변환하는 것입니다. 예를 들어 x.to(v => "translateX(" + v + "px)")처럼 사용할 수 있습니다. 함수는 현재 숫자 값을 받아 변환된 출력을 반환하며, 이 출력이 스타일로 적용됩니다.

.to() 메서드는 범위 대응을 위한 배열 입력도 받을 수 있습니다. x.to([0, 1], ["#ff0000", "#00ff00"])은 스프링 값을 [0, 1] 범위에서 빨간색부터 초록색까지의 색상 범위로 대응합니다. 이 방법을 사용하면 숫자로만 표현할 수 없는 색상, 문자열 또는 기타 값으로 숫자 스프링을 보간할 수 있습니다.

스프링이 여러 값을 동시에 추적할 때는 이 값들을 함께 보간할 수 있습니다. { x, y }를 추적하는 스프링에는 다음과 같이 작성할 수 있습니다: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). .to() 콜백은 스프링 설정에 나타나는 순서대로 모든 값을 받습니다.

animated()로 직접 만든 구성 요소를 감쌀 수 있습니다. 예를 들어 const AnimatedCard = animated(Card)와 같이 작성합니다. 감싼 구성 요소는 style 속성을 받고 이를 DOM 요소로 전달해야 합니다. 이제 AnimatedCard는 animated.div와 마찬가지로 스타일 속성에서 SpringValues를 받을 수 있습니다.

복잡한 애니메이션은 여러 스프링을 함께 사용하는 경우가 많습니다. 예를 들어 진입 애니메이션에서 하나의 스프링은 불투명도에 사용하고 다른 하나는 세로 위치에 사용할 수 있습니다. 두 값을 하나의 animated.div에 적용할 수 있습니다: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

리액트 스프링의 가장 중요한 성능 특성은 animated 값의 업데이트가 리액트 조정기를 우회한다는 점입니다. 스프링이 애니메이션되는 동안 리액트는 모든 프레임마다 구성 요소를 다시 렌더링하지 NOT 않습니다. 대신 animated.* 구성 요소가 각 requestAnimationFrame 콜백에서 DOM 노드의 스타일 속성을 직접 업데이트하므로, 리액트의 추가 부담 없이 초당 60프레임 애니메이션을 구현할 수 있습니다.

보간을 사용하는 일반적인 애니메이션 패턴은 다음과 같습니다. opacity.to([0, 1], [0, 1])을 사용해 처음 표시될 때 서서히 나타내고, scale.to(s => "scale(" + s + ")")을 사용해 마우스를 올렸을 때 확대하며, rotation.to(r => "rotate(" + r + "deg)")를 사용해 전환할 때 회전합니다. 이러한 변환을 연결하면 복합 효과를 만들 수 있습니다.

기본적으로 범위 배열과 함께 사용하는 .to()는 정의된 범위를 넘어 외삽할 수 있습니다. 외삽 옵션으로 이를 제어할 수 있습니다. x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" })를 사용하면 스프링이 초과 이동하더라도 출력이 0보다 작아지거나 100보다 커지지 않습니다. 이는 진행률 표시줄과 범위가 제한된 애니메이션에 유용합니다.

스프링 값을 적용할 때 일반 div 대신 animated.div를 사용해야 하는 이유는 무엇인가요?

animated.div, animated.span, animated(CustomComponent)은 스타일 속성으로 SpringValues를 받을 수 있는 바로 교체 가능한 구성 요소입니다. .to() 메서드는 스프링 값을 보간하여 CSS 문자열, 색상 범위 또는 원하는 출력 형식으로 변환합니다. 여러 스프링은 하나의 요소에서 자연스럽게 조합됩니다. 가장 중요한 성능상의 이점은 RAF 콜백에서 DOM 스타일을 직접 변경하여 스프링 업데이트가 리액트의 재렌더링을 우회한다는 점입니다.