Vue.js에서 v-if와 v-for의 이해와 활용

Vue.js는 사용자 인터페이스를 효율적으로 구축할 수 있는 프레임워크로, 그 중 v-if와 v-for는 조건문과 반복문을 처리하는 데 사용됩니다. 이 글에서는 v-if와 v-for의 개념, 사용 방법, 그리고 응용 방법을 예제와 함께 자세히 알아보겠습니다.

v-if: 조건에 따라 DOM 요소 렌더링하기

v-if는 조건에 따라 특정 DOM 요소를 렌더링할지 말지를 제어하는 디렉티브입니다. 조건이 true이면 해당 요소가 DOM에 렌더링되고, false이면 렌더링되지 않습니다.

기본 사용법

<script setup>
import { ref } from 'vue';

const isLoggedIn = ref(false);
</script>

<template>
    <div>
        <p v-if="isLoggedIn">환영합니다!</p>
        <p v-else>로그인해주세요.</p>
    </div>
</template>

설명:

• isLoggedIn이 true이면 "환영합니다!"가 렌더링됩니다.
• v-else를 사용하여 조건이 false일 때 다른 요소를 렌더링할 수도 있습니다.

v-else-if

<script setup>
import { ref } from 'vue';

const userRole = ref('editor');
</script>

<template>
    <div>
        <p v-if="userRole === 'admin'">관리자 화면</p>
        <p v-else-if="userRole === 'editor'">에디터 화면</p>
        <p v-else>일반 사용자 화면</p>
    </div>
</template>

설명:

• 여러 조건을 v-else-if로 연결해 다양한 결과를 처리할 수 있습니다.

v-for: 리스트 렌더링

v-for는 배열이나 객체를 반복하여 DOM 요소를 렌더링할 때 사용됩니다. Vue.js는 이를 통해 효율적으로 리스트를 생성합니다.

기본 사용법

<script setup>
import { reactive } from 'vue';

const items = reactive(['사과', '바나나', '체리']);
</script>

<template>
    <ul>
        <li v-for="(item, index) in items" :key="index">
	        {{ index + 1 }}. {{ item }}
        </li>
    </ul>
</template>

설명:

• items 배열의 각 항목이 <li> 요소로 렌더링됩니다.
• :key 속성은 Vue가 각 요소를 고유하게 식별할 수 있도록 돕습니다.

객체 반복하기

<script setup>
import { reactive } from 'vue';

const user = reactive({
	name: '홍길동',
	age: 30,
	job: '개발자',
});
</script>

<template>
	<ul>
		<li v-for="(value, key) in user" :key="key">
			{{ key }}: {{ value }}
		</li>
	</ul>
</template>

설명:

• 객체의 키와 값을 반복적으로 렌더링할 수 있습니다.

v-if와 v-for의 결합: 주의점과 사용법

v-if와 v-for를 함께 사용하는 것은 가능하지만, 성능과 코드 가독성을 고려하여 신중히 사용해야 합니다. Vue.js는 v-for이 먼저 실행된 후 v-if를 평가하므로, 불필요한 요소를 렌더링할 가능성이 있습니다.

비효율적인 사용법

<script setup>
import { reactive } from 'vue';

const items = reactive([
    { id: 1, name: '사과', show: true },
    { id: 2, name: '바나나', show: false },
    { id: 3, name: '체리', show: true },
]);
</script>

<template>
    <ul>
        <li v-for="item in items" v-if="item.show" :key="item.id">
        	{{ item.name }}
        </li>
    </ul>
</template>

문제점:

• v-for가 모든 항목을 반복한 뒤 v-if를 평가하므로 성능에 부정적인 영향을 미칠 수 있습니다.

효율적인 사용법

v-if 조건을 배열 필터링으로 처리합니다.

<script setup>
import { reactive, computed } from 'vue';

const items = reactive([
    { id: 1, name: '사과', show: true },
    { id: 2, name: '바나나', show: false },
    { id: 3, name: '체리', show: true },
]);

const filteredItems = computed(() => {
	return items.filter(item => item.show);
});
</script>

<template>
    <ul>
        <li v-for="item in filteredItems" :key="item.id">
	        {{ item.name }}
        </li>
    </ul>
</template>

장점:

• 렌더링 전에 조건을 필터링하여 불필요한 계산을 줄입니다.

활용 예제: 동적 데이터 렌더링

사용자 목록과 상태 표시

<script setup>
import { reactive } from 'vue';

const users = reactive([
    { id: 1, name: '홍길동', active: true },
    { id: 2, name: '김철수', active: false },
    { id: 3, name: '이영희', active: true },
]);

const toggleActive = (id) => {
	const user = users.find(user => user.id === id);
	if (user) user.active = !user.active;
};
</script>

<template>
    <div>
        <h1>사용자 목록</h1>
        <ul>
            <li v-for="user in users" :key="user.id">
                <span :class="{ active: user.active }">
	                {{ user.name }}
                </span>
                <button @click="toggleActive(user.id)">
	                {{ user.active ? '비활성화' : '활성화' }}
                </button>
            </li>
        </ul>
    </div>
</template>

<style scoped>
.active {
    font-weight: bold;
    color: green;
    }
</style>

설명:

• 각 사용자 상태를 active 여부에 따라 동적으로 표시합니다.
• 버튼을 통해 사용자의 상태를 변경할 수 있습니다.

결론

v-if와 v-for는 Vue.js 애플리케이션에서 중요한 역할을 하며, 이를 효과적으로 사용하면 효율적이고 가독성 높은 코드를 작성할 수 있습니다. 하지만 이 두 디렉티브를 결합할 때는 성능을 고려해야 합니다. 필터링이나 계산 속성을 사용해 효율성을 극대화하고, 유지보수를 쉽게 할 수 있는 구조를 선택하세요.