[Vue.js] Vue에서 <template>을 사용한 조건부 렌더링

<template>
  <div>
    <!-- 첫 번째 예제: 조건에 따라 두 가지 다른 요소를 렌더링 -->
    <template v-if="isMorning">
      <h1>좋은 아침이에요!</h1>
      <p>아침에는 일찍 일어나는 게 좋아요.</p>
    </template>
    <template v-else>
      <h1>좋은 저녁이에요!</h1>
      <p>저녁에는 푹 쉬세요.</p>
    </template>

    <!-- 두 번째 예제: 조건에 따라 다른 컴포넌트를 렌더링 -->
    <template v-if="isUserLoggedIn">
      <UserDashboard />
    </template>
    <template v-else>
      <Login />
    </template>
  </div>
</template>

<script>
import UserDashboard from './components/UserDashboard.vue';
import Login from './components/Login.vue';

export default {
  data() {
    return {
      isMorning: new Date().getHours() < 12, // 현재 시간에 따라 아침 또는 저녁을 판단합니다.
      isUserLoggedIn: false // 사용자 로그인 여부를 판단합니다.
    };
  },
  components: {
    UserDashboard,
    Login
  }
};
</script>

<style scoped>
/* 여기에 컴포넌트에만 적용될 스타일을 작성할 수 있습니다. */
</style>

Vue에서 엘리먼트를 사용하여 조건부 렌더링을 구현하는 방법을 알아봅시다.

위 예제는 Vue 컴포넌트에서 엘리먼트를 사용하여 조건에 따라 두 가지 다른 요소나 다른 컴포넌트를 렌더링하는 방법을 보여줍니다.

첫 번째 예제에서는 현재 시간에 따라 아침인지 저녁인지를 판단하여 다른 메시지를 표시합니다. <template v-if="isMorning">은 아침일 때의 메시지를 포함하고, 그렇지 않을 때는 저녁일 때의 메시지를 포함합니다.

두 번째 예제에서는 사용자가 로그인했는지 여부에 따라 다른 컴포넌트를 렌더링합니다. <template v-if="isUserLoggedIn">은 사용자가 로그인한 경우 <UserDashboard> 컴포넌트를 포함하고, 그렇지 않은 경우 <Login> 컴포넌트를 포함합니다.

이렇게 함으로써 Vue에서 을 사용하여 조건부 렌더링을 구현하는 방법을 익힐 수 있습니다.