라이브러리 없이 진입 및 종료 애니메이션 구현하기

{show && }처럼 조건부로 렌더링하면 표시 상태가 거짓이 되는 즉시 리액트가 요소를 DOM에서 제거합니다. 노드가 이미 사라지므로 종료 애니메이션을 실행할 시간이 없습니다.

진입 애니메이션은 쉽지만, 진짜 과제는 종료 애니메이션입니다.

가장 간단한 해결 방법은 절대 마운트 해제하지 않는 것입니다. 요소를 계속 렌더링하면서 숨길 때는 opacity를 0으로 만들고 pointer-events: none을 적용하며, 표시할 때는 불투명도를 1로 되돌리십시오.

이렇게 하면 요소가 DOM에 남아 있는 대신 양방향으로 부드럽게 페이드할 수 있습니다.

완전히 마운트 해제하려면 mounting, mounted, unmounting, unmounted와 같은 단계를 사용하는 작은 상태 머신을 모델링합니다. 종료 애니메이션이 끝난 후에만 노드를 제거합니다.

상태가 각 단계에서 적용할 애니메이션 클래스를 결정합니다.

상태 머신을 사용자 정의 훅으로 캡슐화할 수 있으며, 흔히 useMount라고 부릅니다. 원하는 표시 상태를 받아 요소가 DOM에 있어야 하는지와 현재 단계를 반환합니다.

타이밍 로직이 재사용 가능한 훅에 들어 있으므로 컴포넌트 코드를 깔끔하게 유지할 수 있습니다.

일반적인 규칙을 따라 마운트할 때 enter 다음에 enter-active를 적용하고, 제거할 때 exit 다음에 exit-active를 적용합니다. 기본 클래스는 시작 상태를 설정하고 활성 클래스는 전환과 함께 종료 상태를 설정합니다.

적절한 프레임에서 두 클래스를 전환하면 애니메이션이 실행됩니다.

종료 애니메이션이 끝나는 시점을 알려면 요소에서 transitionend 이벤트를 수신하십시오. 종료 애니메이션에 대해 이 이벤트가 발생하면 상태를 unmounted로 바꾸고 노드를 제거합니다.

이렇게 하면 추측한 시간 제한이 아니라 시각적 애니메이션의 종료 시점에 정확히 맞춰 마운트 해제할 수 있습니다.

이 모든 과정을 Transition 컴포넌트로 감쌀 수 있습니다. 이 컴포넌트는 in 속성과 자식 요소를 받아 자식 요소가 종료 애니메이션을 수행하는 동안 마운트된 상태로 유지하고, 단계별로 올바른 클래스를 적용합니다.

사용하는 쪽에서는 in만 전환하면 진입 및 종료 애니메이션을 별도의 작업 없이 올바르게 사용할 수 있습니다.

세부적으로 주의할 점이 있습니다. 활성 클래스를 추가하기 전에 브라우저가 시작 클래스를 페인트하도록 해야 합니다. 그렇지 않으면 전환 없이 갑자기 바뀝니다. 두 작업 사이에 requestAnimationFrame을 사용하거나 강제 리플로를 수행하면 전환이 실제로 실행됩니다.

이렇게 하면 브라우저가 시작 값을 먼저 등록합니다.

react-transition-group 라이브러리는 이 패턴을 그대로 구현한 Transition 및 CSSTransition 컴포넌트를 제공합니다. 여기에는 클래스 수명 주기와 마운트 해제 시점도 포함됩니다.

직접 만든 DIY 버전은 이 라이브러리의 핵심 아이디어를 그대로 따르므로, 직접 하나를 만들어 보면 라이브러리도 쉽게 이해할 수 있습니다.

단순한 페이드 하나만 필요하다면 마운트된 상태로 유지하는 방식이나 작은 훅으로 충분하며 의존성도 피할 수 있습니다. 여러 전환을 조정하거나, 항목의 추가와 제거가 있는 목록을 다루거나, 복잡한 순서 제어가 필요하다면 라이브러리를 사용하는 편이 시간과 예외 상황의 오류를 줄여 줍니다.

앱에 실제로 필요한 애니메이션의 복잡도를 기준으로 선택하십시오.

종료 애니메이션을 사용하려면 애니메이션이 완료될 때까지 요소를 유지해야 합니다. 요소를 계속 마운트해 두거나, 상태 머신과 transitionend를 함께 사용하거나, 라이브러리를 사용할 수 있습니다.

작동 원리를 이해하면 요구 사항에 맞는 가장 가벼운 방법을 선택할 수 있습니다.

종료 애니메이션에 대한 이해도를 확인해 보십시오.

종료 애니메이션이 어려운 이유와 두 가지 해결책인 마운트된 상태로 유지하는 방식 및 마운트 상태 머신을 배웠습니다. 또한 transitionend로 마운트 해제 시점을 정하는 방법과 재사용 가능한 Transition 컴포넌트를 만드는 방법도 살펴보았습니다.

DIY 대신 react-transition-group를 사용해야 하는 경우도 확인했습니다.