[Vue] 조건부 렌더링(Conditional Rendering)

오리통통·2024년 11월 5일

vue

Vue

목록 보기

4/11

📚 이번 포스팅에서는 조건부 렌더링에 대해서 자세하게 알아보도록 하자.

1. v-if

표현식 값의 true/false를 기반으로 요소를 조건부로 렌더링

2. v-show

표현식 값의 true/false를 기반으로 요소의 가시성(visibility)을 전환

3. v-if vs v-show

1) v-if

초기 조건이 false인 경우 아무 작업도 수행하지 않음
초기 렌더링 비용이 낮지만, 토글 비용이 높음
조건이 자주 변경되지 않을 때 유용

2) v-show

초기 조건에 관계없이 항상 렌더링
초기 렌더링 비용이 낮지만, 토글 비용이 낮음
요소가 자주 토글될 때 유용

즉, 콘텐츠를 자주 전환해야 하는 경우에는 v-show를, 실행 중에 조건이 변경되지 않는 경우에는 v-if를 권장한다.

4. 예시

<body>
    <div id="app">
        <button @click="toggleVisibility">Toggle</button>
        
        <p v-if="isVisible">This is controlled by v-if</p>
        <p v-show="isVisible">This is controlled by v-show</p>
    </div>

    <script>
        const { createApp, ref } = Vue

        createApp({
            setup() {
                const isVisible = ref(true)

                const toggleVisibility = () => {
                    isVisible.value = !isVisible.value
                }

                return {
                    isVisible,
                    toggleVisibility
                }
            }
        }).mount('#app')
    </script>
</body>