Vue.js 조건부 렌더링

Vue.js의 조건부 렌더링을 사용하면 특정 조건에 따라 요소를 동적으로 표시하거나 숨길 수 있습니다. 이 기능은 반응형 및 대화형 사용자 인터페이스를 만드는 데 필수적입니다. Vue.js는 조건부 렌더링을 처리하기 위한 여러 지침을 제공하여 애플리케이션에서 요소의 가시성을 효율적으로 관리할 수 있습니다.

v-if 지시어

v-if 지시어는 표현식의 진실성에 따라 요소를 조건부로 렌더링하는 데 사용됩니다. 표현식이 true로 평가되면 요소가 렌더링되고, 그렇지 않으면 DOM에 포함되지 않습니다. 다음은 기본 예입니다.

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

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

이 예에서 문단 요소는 isVisible이 true인 경우에만 렌더링됩니다. 버튼을 클릭하면 isVisible의 값이 토글되어 문단의 가시성이 제어됩니다.

v-else 지시어

v-else 지시어는 v-if와 함께 사용하여 v-if 조건이 false일 때 표시할 대체 콘텐츠 블록을 지정할 수 있습니다. 다음은 예입니다.

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <p v-else>This text is visible if 'isVisible' is false.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

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

이 예에서 isVisible이 true이면 첫 번째 문단이 표시됩니다. isVisible이 false이면 두 번째 문단이 대신 표시됩니다.

v-show 지시어

v-show 지시문은 또한 조건부로 요소를 렌더링할 수 있게 하지만, DOM에서 요소를 추가하거나 제거하는 대신 CSS display 속성을 사용하여 요소의 가시성을 토글한다는 점에서 v-if와 다릅니다. 요소의 가시성을 자주 토글해야 하는 경우 이 방법이 더 효율적일 수 있습니다.

<template>
  <div>
    <p v-show="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

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

이 예에서 v-show 지시문은 display 속성을 설정하여 문단의 가시성을 제어합니다. 요소는 DOM에 남아 있지만 isVisible 값에 따라 숨겨지거나 표시됩니다.

v-else-if 지시어

v-else-if 지시문은 조건 렌더링 논리에서 "else if" 체인을 만드는 데 사용됩니다. 이를 통해 이전 v-if 조건이 충족되지 않는지 평가하기 위한 추가 조건을 지정할 수 있습니다. 다음은 예입니다.

<template>
  <div>
    <p v-if="status === 'loading'">Loading...</p>
    <p v-else-if="status === 'error'">Error occurred!</p>
    <p v-else>Content loaded successfully.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'loading'
    };
  }
};
</script>

이 예에서 표시되는 내용은 status 속성의 값에 따라 달라집니다. v-if, v-else-if, 및 v-else 지시문은 다양한 상태를 처리하는 데 사용됩니다.

결론

조건부 렌더링은 Vue.js로 대화형 및 동적 애플리케이션을 개발하는 데 중요한 측면입니다. v-if, v-else, v-show, v-else-if와 같은 지시문을 사용하면 다양한 조건에 따라 요소의 표시를 제어할 수 있습니다. 이러한 지시문을 숙지하면 Vue.js 애플리케이션에서 보다 반응성이 뛰어나고 사용자 친화적인 인터페이스를 만드는 데 도움이 됩니다.