Vue.js] 18. Built-in Components > Transition, KeepAlive

Vue는 상태 변화에 대응하기 위해 두가지 내장 컴포넌트를 제공한다. 

• Transition : element 또는 component가 DOM에 들어오고 나갈 때 애니메이션을 적용하기 위함
• TransitionGroup : element 또는 component가 v-for 리스트에 삽입, 제거 또는 이동할 때 애니메이션을 적용하기 위함

이 두 가지 컴포넌트 외에도 CSS 클래스 트랜지션 또는 스타일 바인딩을 통한 상태 기반 애니메이션과 같은 기술을 사용할 수 있다. 

<Transition> 컴포넌트

<button @click="show = !show">토글</button>
<Transition>
  <p v-if="show">안녕</p>
</Transition>
/* 이 클래스들이 무엇을 하는지 다음에 설명하겠습니다. */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

CSS 기반 트랜지션

진입/진출 트랜지션에 적용되는 6개의 클래스가 있습니다.

트랜지션은 name prop을 통해 이름을 지정할 수 있습니다:

이름이 지정된 트랜지션의 경우, 트랜지션 클래스에는 v 대신 이름이 접두사로 붙습니다. 

< TransitionGroup> 컴포넌트

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

<KeepAlive> 컴포넌트

여러 컴포넌트 간에 동적으로 전환될 때, 컴포넌트 인스턴스를 조건부로 캐시할 수 있는 빌트인 컴포넌트이다. 

<component :is="activeComponent" />

 

기본적으로 활성 컴포넌트 인스턴스는 전환할 때 마운트 해제된다. 이렇게 되면 모든 변경된 상태가 손실된다. 

상태가 보존되기를 원하면 <KeepAlive>로 감싼다. 

<!-- 비활성 컴포넌트가 캐시됩니다! -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

Include / Exclude

기본적으로 <KeepAlive>는 내부의 모든 컴포넌트 인스턴스를 캐시하지만 include, exclude props를 통해 이 동작을 사용자 정의할 수 있다.