[CSS] Framer motion - motion.div 내부에 있는 state가 변경되어도 애니메이션이 재시작하지 않는 이유

Q1. 그렇지만 react에서는 state가 변경되면 재렌더링을 진행하는 것 아냐? 나는 state가 변경된다 => motion.div 내부 컨텐츠가 변경된다 => 재렌더링 된다 => 애니메이션이 재생된다 이렇게 이해했는데 틀린 부분 좀 짚어줘

A1. 맞습니다. React에서는 상태(state)가 변경되면 해당 컴포넌트가 재렌더링됩니다. 그러나 애니메이션 라이브러리인 Framer Motion에서는 일반적인 React의 렌더링과는 조금 다른 동작이 있을 수 있습니다.

Framer Motion은 컴포넌트의 렌더링과 애니메이션을 분리하는 방식으로 동작합니다. 컴포넌트는 상태가 변경되어도 렌더링될 때마다 애니메이션을 다시 시작하지 않습니다. 대신, Framer Motion은 애니메이션을 명시적으로 제어할 수 있는 방법을 제공합니다.

예를 들어, Framer Motion의 `animate` prop은 React의 상태와는 독립적으로 애니메이션을 제어합니다. 이는 상태가 변경되어도 `animate` prop이 변경되지 않으면 애니메이션이 재생되지 않는다는 것을 의미합니다.

따라서, 예제 코드에서 `animate` prop에 설정된 애니메이션은 React의 상태(state)와는 독립적으로 동작하며, `onAnimationComplete` 함수에서 상태가 변경될 때마다 애니메이션이 다시 시작되도록 조정되어 있습니다. 

즉, React의 렌더링과 Framer Motion의 애니메이션은 개념적으로는 분리되어 있으며, React의 렌더링이 발생하더라도 Framer Motion은 명시적인 변경이 없는 한 애니메이션을 계속 유지합니다.

 

 

 

Q2.음 그럼 motion.div는 리액트가 감지하는 DOM이 아닌거야?

A2.정확히 맞습니다. motion.div는 Framer Motion이 제공하는 컴포넌트로, 이는 React의 기본 div 엘리먼트와는 약간 다른 동작을 가지고 있습니다. motion.div는 Framer Motion이 제어하는 별도의 애니메이션 DOM 엘리먼트를 생성하게 됩니다.

기본적으로 React는 컴포넌트의 상태(state)나 속성(props)이 변경되면 해당 컴포넌트를 리렌더링하고, 이때 컴포넌트의 DOM 구조도 갱신됩니다. 그러나 Framer Motion은 애니메이션을 위해 실제 DOM 구조와는 독립적으로 자체적인 애니메이션 엘리먼트를 생성하고 관리합니다.

motion.div는 실제 DOM이 변경되지 않고, Framer Motion이 애니메이션을 처리하기 위해 사용하는 가상적인 DOM 엘리먼트에 대응합니다. 이로써 애니메이션을 부드럽게 처리하면서도 React의 렌더링 사이클과는 별도로 동작할 수 있게 됩니다.