Intro
https://www.vuemastery.com/courses/intro-to-vue-js 에 정리된 공식 Vue 무료 강의에 있는 내용을 짧게 정리해보려 한다.
리스트 렌더링
리스트 렌더링은 Array나 Object등에 있는 데이터를 반복적으로 불러와서 화면에 보여주는 것이다.
Vue.js의 리스트 렌더링 방법은 v-for라는 directive를 사용하면 된다.
나머지는 파이썬과 매우 유사하다.
eachname in listname과 같은 형식으로 적어주면 된다.
예제 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>TEST!!</title>
</head>
<body>
<div id="app">
<ol>
<li v-for="name in names">{{name}}</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
names: ['철수', '영희', '민수'],
},
});
</script>
</body>
</html>위의 예제 소스에서 v-for를 보면 each name(각각의 이름)은 name이며, list name(전체 리스트의 이름)은 names다.
list name은 프로그래밍적인 용어로는 collection name이라 한다.
그리고 리스트 렌더링을 할 때는 key를 정해주는 것이 중요하다.
key는 중복되지 않는 것이 좋다.
왜냐하면 데이터가 바뀌고 돔이 다시 랜더링 될 때, key를 기준으로 무엇을 다시 랜더링해야할지 판단하기 때문이다.
만일 names 내부에 중복된 name이 없다면, 다음과 같이 할 수 있다.
<li v-for="name in names" :key="name">{{name}}<li>중복된 name이 있다면, index를 사용하여 키를 부여할 수 있는데, 이 index는 0부터 시작하는 배열 index라고 생각하면 쉽다.
<li v-for="(name, index) in names" :key="index + name">{{name}}<li>이런식으로 키를 부여할 수 있다.
풀스택 웹개발자로 일하고 있는 Jake Seo입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. 프론트엔드: Javascript, React 백엔드: Spring Framework에 관심이 있습니다.