Vue.js 조건부 렌더링: v-if 디렉티브를 활용하여 요소 제어하기

Vue.js에서 조건에 따라 요소를 렌더링하거나 제어하는 방법에 대해 알아보겠습니다. Vue의 Single File Component(SFC) 형식을 사용하여 다양한 예제를 제시하겠습니다.

예제 1: 조건에 따라 요소 렌더링하기

파일명: ConditionalRendering.vue

<template>
  <div>
    <p v-if="isVisible">이 요소는 조건이 true일 때만 표시됩니다.</p>
    <p v-else>이 요소는 조건이 false일 때만 표시됩니다.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true // true 또는 false로 조정 가능
    };
  }
};
</script>

출력 결과:

• 이 요소는 조건이 true일 때만 표시됩니다.

설명:
이 예제에서는 Vue의 v-if 디렉티브를 사용하여 조건에 따라 요소를 렌더링하는 방법을 보여줍니다. isVisible 데이터 속성의 값에 따라 p 요소가 조건부로 렌더링됩니다. true일 경우 첫 번째 p 요소가 표시되고, false일 경우 두 번째 p 요소가 표시됩니다.

예제 2: 조건부 렌더링에 대한 다양한 활용

파일명: ConditionalRendering2.vue

<template>
  <div>
    <div v-if="isLoggedin">
      <p>로그인되었습니다. 사용자 정보를 표시합니다.</p>
      <p>사용자 이름: {{ username }}</p>
      <p>사용자 이메일: {{ email }}</p>
    </div>
    <div v-else>
      <p>로그인이 필요한 페이지입니다.</p>
      <button @click="login">로그인</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedin: false,
      username: '',
      email: ''
    };
  },
  methods: {
    login() {
      // 로그인 로직 수행
      // 사용자 정보 설정
      this.isLoggedin = true;
      this.username = 'example_user';
      this.email = 'user@example.com';
    }
  }
};
</script>

출력 결과:

• 로그인이 필요한 페이지입니다.
• [로그인] 버튼

설명:
이 예제에서는 Vue의 v-if 디렉티브를 사용하여 로그인 상태에 따라 다른 요소를 렌더링하는 방법을 보여줍니다. isLoggedin 데이터 속성을 기반으로 로그인 상태를 제어하고, 로그인이 필요한 페이지일 경우 로그인 버튼을 표시하며 로그인이 완료되면 사용자 정보를 표시합니다.

위의 예제를 통해 Vue.js에서 v-if 디렉티브를 사용하여 조건부로 요소를 렌더링하는 방법을 자세히 살펴보았습니다. 조건에 따라 화면을 동적으로 제어하는데 유용한 기능입니다.