Vue의 내장 컴포넌트 (Built-in Component)

Vue의 내장 컴포넌트, Built-in Component

🧱 Built-in Component란

- Vue에서 기본적으로 제공하는 내장 컴포넌트

- 동적 컴포넌트를 렌더링하기 위한 '메타 컴포넌트'로 KeepAlive, Transition, Teleport 등이 있다.

 

 

🧱 KeepAlive

<KeepAlive>
	<component :is="activeComponent" />
</KeepAlive>

- 기본적으로 컴포넌트의 인스턴스는 전환하게되면 마운트가 해제되어 모든 변경상태가 사라진다.

- 컴포넌트를 다시 표시하게 되면 초기 상태의 새 컴포넌트가 생성된다.

- KeepAlive는 컴포넌트 인스턴스가 비활성 상태일 경우에도 상태를 보존할 수 있도록 해준다.

 

 

🧱 Transition

<button @click="show = !show">토글</button>

<Transition>
    <p v-if="show">안녕</p>
</Transition>

 

- Vue에서 트렌지션과 애니메이션을 쉽게 줄 수 있는 내장 컴포넌트

- 컴포넌트가 DOM에 나타나고 사라질 때 애니메이션 적용하기 위한 컴포넌트

- default slot을 통해 전달된 컴포넌트에 적용된다.

- 해당 컴포넌트가 아래의 조건 중 하나에 충족하면 발생한다.

 

(1) Transition 컴포넌트 내에서 v-if를 사용할 때

(2) v-show 를 통한 렌더링할 때

(3) component 를 통해 동적 컴포넌트 토글될 때

 

<button @click="show = !show">토글</button>

<Transition name="slide">
    <p v-if="show">슬라이드 안녕</p>
</Transition>

- 또한 name prop을 통해 애니메이션을 선택할 수 있다.

 

 

CSS 기반 트랜지션

- 진입/진출 애니메이션은 다른 지속 시간과 타이밍 함수를 사용할 수 있다

- Transition 컴포넌트의 진입/진출되는 애니메이션은 6개의 class로 구성되어있다.

<style>
.slide-fade-enter-active {
	transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
	transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
}
</style>

(1) 나타날 때 class

v-enter-from : 진입 시작

v-enter-active : 진입 활성

v-enter-to : 진입 종료 (애니메이션 완료시 제거된다.)

 

(2) 사라질 때 class

v-leave-from : 진출 시작

v-leave-active : 진출 활성

v-leave-to : 진출 활성 (애니메이션 완료시 제거된다.)

 

(3) 다른 종류(ex. 슬라이드)의 애니메이션일 경우 앞에 'v' 대신 이름이 붙는다.

slide-enter-from

slide-enter-active

slide-enter-to

slide-leave-from

slide-leave-active

slide-leave-to

 

 

🧱 TransitionGroup

<TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item">
    	{{ item }}
    </li>
</TransitionGroup>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

- 컴포넌트가 v-for 목록에 삽입, 제거 또는 이동할 때 애니메이션 적용하기 위한 컴포넌트

- Transition과 props, css 트랜지션 클래스 등 비슷하다.

- 래퍼 엘리먼트를 렌더링하지 않는다.

- 하지만 tag를 지정하여 렌더링할 엘리먼트를 설정할 수 있다.

- 내부 엘리먼트는 고유한 key 속성을 필수로 가져야한다.

- CSS 트랜지션 클래스는 그룹/컨테이너가 아닌 목록의 개별 엘리먼트에 적용된다.

 

 

🧱 Teleport

- 템플릿의 일부분을 외부 다른 DOM 노드로 이동해주는 내장 컴포넌트

- 시각적인 관점에서 Vue 앱 외부의 다른 DOM에 표시되어야할 때 사용한다. (모달)

 

Teleport 사용방법

(1) 이동할 장소를 to로 지정

<Teleport to="#modals">
	<div>A</div>
</Teleport>

<Teleport to="#modals">
	<div>B</div>
</Teleport>

 

(2) 렌더링된 모습

<div id="modals">
    <div>A</div>
    <div>B</div>
</div>

 

+ 같은 대상에 여러 텔레포트를 사용하면 추가된 순서대로 위치한다.