Vue.js는 강력한 프런트엔드 JavaScript 프레임워크로, 조건문과 반복문을 사용하여 동적인 웹 애플리케이션을 쉽게 구현할 수 있습니다. 이번 글에서는 Vue.js에서의 조건문과 반복문 사용법에 대해 알아보겠습니다.
조건문 (Conditional Rendering)
Vue.js에서 조건문을 사용하려면 v-if 디렉티브를 사용합니다. 이 디렉티브는 특정 조건에 따라 요소를 렌더링할지 여부를 결정합니다. v-if는 불리언 값을 받아서 해당 값이 true이면 요소를 렌더링하고, false이면 요소를 제거합니다.
<div v-if="showMessage">
<p>{{ message }}</p>
</div>
위 예제에서 showMessage라는 데이터 속성이 true이면 <div> 요소와 그 안의 <p> 요소가 렌더링됩니다. 만약 showMessage가 false로 변경되면 해당 요소들은 화면에서 사라집니다.
조건문을 사용할 때는 v-else 디렉티브를 함께 사용하여 v-if가 false 일 때 렌더링할 대체 요소를 지정할 수도 있습니다.
<div v-if="showMessage">
<p>{{ message }}</p>
</div>
<div v-else>
<p>No message to display.</p>
</div>
위 예제에서 showMessage가 true이면 첫 번째 <div> 요소가 렌더링되고, false일 때는 두 번째 <div> 요소가 대신 렌더링됩니다.
반복문 (Looping)
Vue.js에서 반복문을 사용하려면 v-for 디렉티브를 사용합니다. 이 디렉티브는 배열이나 객체의 각 항목을 순회하며 요소를 렌더링합니다.
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
위 예제에서 items라는 배열의 각 항목을 순회하며 <li> 요소들을 렌더링합니다. v-for 디렉티브는 반복할 항목을 지정하는데, 여기서 item은 배열의 원소를 나타냅니다. Vue.js가 자동으로 각 항목에 대한 반복 변수를 생성하고 사용하므로 편리하게 값을 출력하거나 조작할 수 있습니다.
반복문 또한 v-if와 함께 사용할 수 있습니다. 예를 들어, 특정 조건에 맞는 항목만 렌더링하는 경우에 v-if를 사용할 수 있습니다.
<ul>
<li v-for="item in items" v-if="item.isAvailable">{{ item.name }}</li>
</ul>
위 예제에서 items 배열의 각 항목에 대해 isAvailable 속성을 확인하여 해당 항목이 사용 가능한 경우에만 <li> 요소를 렌더링합니다.
정리
조건문과 반복문은 Vue.js에서 동적인 웹 애플리케이션을 구현하는 데 필수적인 요소입니다. v-if 디렉티브를 사용하여 조건에 따라 요소를 렌더링하거나 제거할 수 있으며, v-for 디렉티브를 사용하여 반복문을 구현할 수 있습니다. 이를 통해 Vue.js를 활용하여 보다 유연하고 동적인 웹 애플리케이션을 개발할 수 있습니다.
더 자세한 내용은 Vue.js 공식 문서를 참고하시기 바랍니다.
Soyeon K. (손초롱)