모달 컴포넌트 transition 속성 이슈 - Vue 2.X와 Vue3.X

모달에 트랜지션 속성을 넣는 과정에서 Vue 버전차이로 인해 이슈가 발생했다.

 

1. <transition>을 모달 컴포넌트 안에 선언하고 싶은데?

 <transition name="modal">
  <modal v-if="showModal" @close="showModal = false">
    <!--
      you can use custom content here to overwrite
      default content
    -->
    <template v-slot:header>
      <h3>custom header</h3>
    </template>
  </modal>
  </transition>

위의 코드처럼 작성하면 modal의 애니메이션을 담당하는 <transition>이 모달 컴포넌트와 분리된다. 가독성이 매우 떨어진다.

 

2. Vue 2.x 공식문서 예시

<!-- modal component -->
<template>
  <transition>
    <div class="modal"><slot/></div>
  </transition>
</template>

<!-- usage -->
<modal v-if="showModal">hello</modal>

Vue2.x 공식문서대로 모달안에 트랜지션이 들어간 코드를 설정해도 원하는 결과가 나오지 않았다.

그리고 Vue2.x 에서는 모달 컴포넌트를 쓰는 루트 컴포넌트에서 v-if 속성을 사용하여 트랜지션을 작동시켰다.

하지만 <transition>은 자식 요소들에 의해서 작동해야지, <transition>자체가 토글링되면 안된다고 한다.

 

3. Vue 3.x migration strategy

<!-- modal component -->
<template>
  <transition>
    <div v-if="show" class="modal"><slot/></div>
  </transition>
</template>
<script>
export default {
  props: ['show']
}
</script>

<!-- usage -->
<modal :show="showModal">hello</modal>

이는 prop을 하위 컴포넌트에 전달하여 트랜지션 하위 엘리먼트를 on/off하는 것으로 통제한다.

 

 

레퍼런스

1) https://vuejs.org/v2/examples/modal.html

Modal Component — Vue.js

2) https://v3.vuejs.org/examples/modal.html#modal-component

Modal Component | Vue.js

3) https://v3.vuejs.org/guide/migration/transition-as-root.html#overview

Transition as Root | Vue.js