[Vue.js] `v-if`와 `<transition>`을 사용하여 동적인 화면을 만드는 방법

Vue.js에서 v-if와 <transition>을 사용하여 동적인 화면을 만드는 방법

이번 포스팅에서는 Vue.js에서 조건부 렌더링을 위한 v-if 디렉티브와 요소에 애니메이션 효과를 부여하는 <transition> 컴포넌트를 함께 사용하는 방법을 알아본다. 이 두 기능을 결합하면 사용자에게 더욱 부드럽고 매력적인 인터페이스를 제공할 수 있다.

1. v-if로 조건부 렌더링하기

v-if는 Vue.js에서 요소를 조건에 따라 렌더링할지 말지 결정하는 디렉티브이다. 특정 조건이 참(true)일 때만 요소가 DOM에 추가되고, 거짓(false)일 때는 DOM에서 완전히 제거된다.

예제:

<template>
  <div id="app">
    <button @click="toggleMessage">메시지 토글</button>
    <p v-if="showMessage">이 메시지는 v-if로 제어된다.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: false
    };
  },
  methods: {
    toggleMessage() {
      this.showMessage = !this.showMessage;
    }
  }
};
</script>

위 코드에서 showMessage가 true일 때만 <p> 태그가 화면에 나타난다.

---

2. <transition>으로 애니메이션 효과 부여하기

<transition> 컴포넌트는 Vue.js에서 요소가 삽입되거나 제거될 때 애니메이션 효과를 쉽게 적용할 수 있도록 돕는 기능이다. <transition>으로 감싸진 요소가 v-if나 v-show에 의해 상태가 변경될 때, Vue는 자동으로 특정 CSS 클래스를 추가하여 전환 효과를 트리거한다.

<transition>이 사용하는 주요 CSS 클래스는 다음과 같다:

• {name}-enter-from: 요소가 나타나기 전 상태이다.
• {name}-enter-active: 나타나는 전환 과정 동안 적용되는 상태이다.
• {name}-enter-to: 요소가 나타난 후의 최종 상태이다.
• {name}-leave-from: 요소가 사라지기 전 상태이다.
• {name}-leave-active: 사라지는 전환 과정 동안 적용되는 상태이다.
• {name}-leave-to: 요소가 사라진 후의 최종 상태이다.

여기서 {name}은 <transition> 컴포넌트에 부여한 name 속성 값이다.

---

3. v-if와 <transition> 함께 사용하기

v-if와 <transition>을 함께 사용하여 요소가 나타나거나 사라질 때 애니메이션을 적용할 수 있다. 중요한 점은 <transition> 컴포넌트는 오직 하나의 루트 엘리먼트만 직접적인 자식으로 가질 수 있다는 점이다.

심플한 예제: 페이드 효과 적용하기

아래 예제는 버튼 클릭 시 텍스트가 서서히 나타나고 사라지는 페이드 효과를 보여준다.

<template>
  <div id="app">
    <button @click="toggleVisibility">텍스트 토글</button>
    <transition name="fade">
      <p v-if="isVisible">안녕하세요! 저는 부드럽게 나타나고 사라진다.</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

<style>
/* fade 전환 효과를 위한 CSS */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease; /* 0.5초 동안 투명도 전환 */
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0; /* 전환 시작/끝 시 투명도를 0으로 설정 */
}
</style>

설명:

• <transition name="fade">는 p 태그를 감싸고 있다.
• v-if="isVisible"은 p 태그의 렌더링 여부를 결정한다.
• fade-enter-active와 fade-leave-active 클래스는 전환이 일어나는 동안 opacity 속성을 0.5초 동안 부드럽게 변화시킨다.
• fade-enter-from과 fade-leave-to 클래스는 전환 시작점과 끝점에서 opacity: 0을 적용하여 요소가 완전히 투명한 상태에서 나타나거나 사라지게 한다.

---

4. 슬라이드 전환 효과 만들기

페이드 효과 외에도 transform 속성을 사용하여 슬라이드 효과를 만들 수 있다.

예제: 오른쪽에서 왼쪽으로 슬라이드 효과 적용하기

<template>
  <div id="app">
    <button @click="toggleScreen">화면 전환</button>
    <div style="overflow: hidden; position: relative; height: 50px; border: 1px solid #ccc;">
      <transition name="slide">
        <div v-if="showScreen1" key="screen1" class="screen-content">
          화면 1 내용이다.
        </div>
        <div v-else key="screen2" class="screen-content">
          화면 2 내용이다. (오른쪽에서 넘어옴)
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showScreen1: true
    };
  },
  methods: {
    toggleScreen() {
      this.showScreen1 = !this.showScreen1;
    }
  }
};
</script>

<style>
.screen-content {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  text-align: center;
  padding: 10px;
  background-color: lightblue;
}

/* 슬라이드 전환 효과를 위한 CSS */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s ease; /* transform 속성 전환 */
}

/* 새로운 화면이 오른쪽에서 나타남 */
.slide-enter-from {
  transform: translateX(100%);
}

/* 이전 화면이 왼쪽으로 사라짐 */
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

설명:

• v-if와 v-else가 적용된 div에 각각 고유한 key를 부여하여 Vue가 두 요소를 다른 것으로 인식하고 전환을 트리거하도록 한다.
• transition name="slide"를 사용한다.
• .slide-enter-from은 새로운 화면이 나타날 때 초기 위치를 오른쪽 (translateX(100%))으로 설정한다.
• .slide-leave-to는 이전 화면이 사라질 때 최종 위치를 왼쪽 (translateX(-100%))으로 설정한다.
• 부모 div에 overflow: hidden;과 position: relative;를 적용하여 전환 시 요소가 튀어나오지 않도록 한다.

---

5. 결론

Vue.js의 v-if와 <transition> 컴포넌트를 사용하면 조건부 렌더링되는 요소에 다양한 애니메이션 효과를 쉽게 적용할 수 있다. <transition>의 자식은 항상 단일 루트 엘리먼트여야 한다는 점을 기억하면, 부드럽고 동적인 사용자 경험을 만들 수 있을 것이다.