Vue.js는 동적 웹 애플리케이션을 쉽게 만들 수 있는 인기 있는 JavaScript 프레임워크입니다. Vue.js는 데이터와 이벤트를 기반으로 콘텐츠를 렌더링할 수 있습니다. 반응형 대화형 사용자 인터페이스를 만드는 데 특히 유용합니다.
Vue 지시문이 무엇인지, 그리고 이를 사용하여 Vue.js에서 조건부 렌더링을 수행하는 방법을 알아보세요.
Vue 지시어란 무엇인가요?
Vue 지시문을 사용하면 고유한 속성을 추가하여 Vue.js 템플릿에서 HTML 요소의 동작을 개선할 수 있습니다.
지시문은 Vue.js의 기본 부분으로, DOM(문서 객체 모델)을 조작하고 요소에 동적 동작을 추가하며 데이터를 관리하는 간단하고 강력한 방법을 제공합니다.
또한 Vue.js를 사용하면 사용자 지정 지시문을 생성할 수 있으므로 Vue 앱에 재사용 가능한 함수를 쉽게 만들 수 있습니다.
Vue 프레임워크는 지시어 이름 앞에 “v-“를 접두사로 붙입니다. Vue에서 일반적으로 사용되는 지시문의 예로는 v-on, v-bind, v-for 및 v-if가 있습니다.
조건부 렌더링이란 무엇인가요?
조건부 렌더링을 사용하면 지정한 조건에 따라 요소를 표시하거나 숨길 수 있습니다. 예를 들어 조건부 렌더링을 사용하여 사용자가 유효한 이메일 주소를 입력한 경우에만 메시지를 표시할 수 있습니다.
Vue.js에서는 v-if 및 v-show와 같은 지시문을 사용하여 React.js에서 콘텐츠를 조건부로 렌더링하는 방식과 다르게 애플리케이션에서 조건부 렌더링을 구현할 수 있습니다.
v-if 지시문을 사용하여 조건부 렌더링 달성
JavaScript if…else 문과 유사하게 Vue.js의 v-if 지시문은 조건을 보유합니다. 조건이 충족되지 않으면 Vue.js는 v-else 지시문에 지정된 다음 조건을 평가하고 조건을 충족하거나 모든 조건을 평가할 때까지 이 작업을 계속합니다.
이 지시문을 사용하면 부울 값에 따라 요소를 조건부로 렌더링할 수 있습니다. 값이 거짓인 경우 Vue.js 컴파일러는 해당 부분을 렌더링하지 않습니다.
다음은 v-if를 사용하여 콘텐츠를 조건부로 렌더링하는 예제입니다:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1 v-if='false' >{{ message1 }}</h1>
<h1 v-else >{{ message2 }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
message1: 'This is your Vue App.',
message2: 'Not Yet a Vue App.'
}
}
})
app.mount('#app')
</script>
</body>
</html>
위의 코드 블록은 HTML 파일 본문에 CDN(콘텐츠 전송 네트워크) 링크를 추가하여 만든 Vue 앱을 보여줍니다. v-if 지시문은 조건이 참인 경우에만 h1 요소를 렌더링합니다.
Vue 앱에서는 특정 동적 기준에 따라 컴포넌트를 렌더링해야 하는 상황이 있습니다. 이는 사용자가 버튼을 클릭할 때만 정보를 표시하거나 API에서 데이터가 로드되는 동안 로딩 표시기를 표시하는 등의 시나리오에 유용합니다.
예를 들어:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div v-if="showUsers">
<ul>
<li>User1</li>
<li>User2</li>
</ul>
</div>
<button v-on:click="toggleShowUsers()">
Toggle Users
</button>
<h1>{{ message }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
showUsers: true,
message: 'This is your Vue App.'
}
},
methods: {
toggleShowUsers() {
this.showUsers = !this.showUsers
}
}
})
app.mount('#app')
</script>
</body>
</html>
위의 코드 블록은 v-if 지시문을 사용하여 부울 변수인 showUsers의 값에 따라 콘텐츠를 조건부로 렌더링합니다.
값이 참이면 div 요소가 표시되고 거짓이면 숨겨집니다. 사용자 전환 버튼을 클릭하면 toggleShowUsers() 메서드가 트리거되어 showUsers의 값이 변경됩니다.
이 예제에서도 v-on 지시문을 사용하여 버튼 클릭 이벤트와 같은 이벤트를 수신합니다. 이 예제에서는 showUsers 값이 변경될 때마다 v-if 지시문을 다시 평가합니다.
v-show 지시문을 사용하여 조건부 렌더링 달성
v-show 지시문은 Vue.js에서 요소를 조건부로 표시하거나 숨기는 또 다른 방법입니다. 부울 표현식을 기반으로 요소를 렌더링할 수 있다는 점에서 v-if 지시문과 유사합니다. 그러나 두 지시문 사이에는 몇 가지 중요한 차이점이 있습니다.
v-show 지시문은 표현식이 false로 평가될 때 DOM에서 요소를 제거하지 않습니다. 대신 CSS를 사용하여 요소의 표시 속성을 없음과 원래 값 사이에서 토글합니다.
이는 요소가 여전히 DOM에 존재하지만 표현식이 거짓일 때 표시되지 않음을 의미합니다.
다음은 예시입니다:
<body>
<div id="app">
<div v-if="showUsers">
<ul>
<li>User1</li>
<li>User2</li>
</ul>
</div>
<button v-on:click="toggleShowUsers()">
Toggle Users
</button>
<h1 v-show="showUsers">{{ message }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
showUsers: true,
message: 'These are the users of the Vue app'
}
},
methods: {
toggleShowUsers() {
this.showUsers = !this.showUsers
}
}
})
app.mount('#app')
</script>
</body>
위의 코드 블록은 v-show 지시문을 사용하여 토글 버튼을 클릭할 때마다 ‘Vue 앱의 사용자입니다’라는 메시지를 표시합니다.
v-if와 v-show 중에서 선택하기
v-if 및 v-show 지시문을 사용하여 Vue.js의 요소를 조건부로 표시하거나 숨길지 여부를 결정할 때 고려해야 할 몇 가지 중요한 요소가 있습니다.
조건이 거의 변하지 않는 경우 v-if 지시문을 사용하는 것이 좋습니다. 조건이 거짓일 때 v-if는 DOM에서 요소를 제거하여 최적의 성능을 저해할 수 있기 때문입니다. 조건이 참이 될 때만 요소가 렌더링되고 조건이 다시 거짓이 되면 DOM에서 제거됩니다.
반면에 조건이 자주 변경될 가능성이 있는 경우에는 v-show 지시문을 사용하여 성능을 개선하는 것이 좋습니다. v-show는 CSS 표시 속성을 없음과 블록 사이에서 토글하여 요소를 숨기거나 표시하고, 요소는 항상 DOM에 렌더링하기 때문입니다.
Vue 앱에서 조건부 렌더링하기
Vue 앱에서 v-if 및 v-show 지시문을 사용하여 콘텐츠를 조건부로 렌더링하는 방법을 배웠습니다. 이러한 지시문을 활용하면 다양한 조건에 따라 콘텐츠를 빠르게 렌더링하여 Vue 구성 요소의 모양과 동작을 더 잘 제어할 수 있습니다.