Vue - Transition / TransitionGroup / Teleport 컴포넌트

Transition

Transition 컴포넌트는 Vue에서 요소가 DOM에 추가되거나 제거될 때 애니메이션을 적용하는 데 사용됩니다. 이는 단일 요소 또는 컴포넌트에 적용될 수 있으며, CSS 전환 또는 애니메이션과 함께 사용할 수 있습니다.

<template>
  <div>
    <button @click="show = !show">토글</button>
    
    <!-- transition 적용 -->
    <transition name="fade">
      <p v-if="show">이 문장이 애니메이션과 함께 나타납니다!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>

<!-- CSS -->
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

• v-if 디렉티브는 요소의 등장과 제거를 관리합니다.
• name="fade"는 클래스 네임을 설정하여 .fade-enter, .fade-leave-active와 같은 CSS 클래스를 자동으로 적용합니다.
• 요소가 DOM에 추가될 때 fade-enter-active와 fade-enter가 적용되고, 제거될 때 fade-leave-active와 fade-leave-to가 적용됩니다.

---

TransitionGroup

TransitionGroup은 여러 요소에 대한 애니메이션을 처리할 수 있는 컴포넌트입니다. 주로 리스트 아이템을 추가하거나 제거할 때 사용됩니다. 개별적인 요소마다 애니메이션 효과를 적용할 수 있습니다.

<template>
  <div>
    <button @click="addItem">아이템 추가</button>

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

<script>
export default {
  data() {
    return {
      items: [ '아이템 1', '아이템 2', '아이템 3' ]
    };
  },
  methods: {
    addItem() {
      this.items.push(`아이템 ${this.items.length + 1}`);
    }
  }
};
</script>

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

• transition-group은 여러 요소에 애니메이션을 적용할 때 사용되며, v-for와 함께 작동하여 리스트가 변경될 때 애니메이션 효과를 적용합니다.
• tag="ul" 속성은 transition-group이 감싸는 요소의 태그를 설정합니다.
• 각 리스트 항목이 추가되거나 제거될 때 페이드 효과와 함께 아래로 이동하는 애니메이션이 적용됩니다.

---

Teleport

Teleport는 DOM의 특정 위치로 콘텐츠를 이동시키는 기능을 제공합니다. 보통 모달, 알림 등 페이지의 다른 부분에서 독립적으로 관리해야 할 요소를 이동할 때 유용합니다.

<template>
  <div>
    <button @click="showModal = true">모달 열기</button>

    <!-- teleport를 사용하여 body로 모달 전송 -->
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <p>이것은 모달입니다!</p>
        <button @click="showModal = false">닫기</button>
      </div>
    </teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

<!-- CSS -->
<style>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
}
</style>

• teleport to="body"는 모달이 현재 컴포넌트의 DOM이 아닌, 전체 body 태그로 이동하여 렌더링되게 만듭니다.
• 이는 모달, 알림, 드롭다운과 같은 UI 컴포넌트를 부모 DOM 계층 구조에 영향을 주지 않고 렌더링해야 할 때 유용합니다.