Vue.js 잘라먹기 - 반복문

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' }
    ]
  }
})

콘솔에서, app4.todos.push({ text: 'New item' })을 입력하십시오. 목록에 새 항목이 추가되어야 합니다.



이상이 vue 가이드에서 이야기하는 반복문이다.

리액트에서는

<div>
<ol>
{ this.props.list.forEach( e => {
return (
<li>{e.name}</li>
)})}
</ol> </div>

this.props.list = [
{name: kate},
{name: jason},
{name: tate}
]

이란 식으로 작성한다.

리액트로 공부를 시작한 나에게는 vue의 문법은 꽤 당황스럽다.
분명 리스트로부터 생성되는 dom element는 <li>일텐데 <li>를 감싸는 표식이 아무 것도 없고 오히려 <li> 안에서 데이터를 불러오기?! 때문이다. 물론 <li> 안에 v-for로 바인드가 되어 있어서 '이 <li>는 데이터에 맞추어 반복될 것이다'라는 표현을 해주고 있긴 하지만 이것이 리액트의 render보다 더 직관적인지는 잘 모르겠다. 다이렉션에 무게를 많이 주는게 vue라는 생각도 들고 이게 자유도가 장점이라는 vue를 더 옥죄는 존재가 되는게 아닌가 싶기도 하다.

일단은 그러하고
천천히 vue에 대해 더 알아가보자