Presence

Presence

Presence는 요소의 등장과 퇴장을 애니메이션하면서 렌더링 동작을 제어할 때 사용해요. Framer Motion의 AnimatePresence와 비슷하지만, CSS 애니메이션을 위해 만들어졌어요.

출처: 문서

본문

사용법 (Usage)

import { Presence } from "@chakra-ui/react"

<Presence present={true}>
  <div>Presence content</div>
</Presence>

Presence를 Framer Motion의 AnimatePresence 컴포넌트처럼 생각하면 돼요. 단, CSS 애니메이션을 위해 만들어진다는 점이 달라요.

기억할 핵심은 다음과 같아요:

  • present prop은 컴포넌트의 존재(presence) 상태를 제어하는 불리언 값이에요.
  • _open 조건은 열린 상태를 스타일링할 때 사용해요.
  • _closed 조건은 닫힌 상태를 스타일링할 때 사용해요.

예시 (Examples)

Fade

애니메이션 이름을 fade-in과 fade-out으로 설정하면, 컴포넌트가 요소의 등장과 퇴장을 애니메이팅해요.

Scale Fade

scale-fade-in과 scale-fade-out 애니메이션 스타일을 사용하면 요소의 등장과 퇴장이 스케일 페이드로 처리돼요.

Slide Fade

slide-from-bottom과 slide-to-bottom 애니메이션 이름을 사용하는 예시예요.

Slide

slide-from-bottom-full과 slide-to-bottom-full 애니메이션 이름을 사용하는 예시예요.

Lazy Mount

lazyMount prop을 사용해 컴포넌트가 present 상태가 될 때까지 마운트를 지연할 수 있어요.

Unmount On Exit

unmountOnExit prop을 사용해 컴포넌트가 present 상태가 아닐 때 언마운트할 수 있어요.

더 알아보기 (Learn more)