[Vue #5] 리스트 렌더링

v-for

요소를 반복하여 렌더링 가능하다.

배열

<div id="app">
  <ul>
    <li v-for="(item,index) in items">
      {{parentMessage}} - {{index}} - {{item.message}}
    </li>
  </ul>
</div>

const App = {
  data() {
    return {
      parentMessage: "Parent",
      items: [{ message: "Foo" }, { message: "Bar" }],
    };
  },
};
const vm = Vue.createApp(App).mount("#app");

배열의 경우는 배열의 아이템 외의 인덱스도 참조가 가능하다.
in이 아닌 of도 똑같이 작동한다.

객체

<div id="app">
  <ul>
    <li v-for="value in myObject">{{value}}</li>
  </ul>
</div>

const App = {
  data() {
    return {
      myObject: {
        title: "How",
        author: "jane",
        publishedAt: "123123",
      },
    };
  },
};
const vm = Vue.createApp(App).mount("#app");

기본적으로 key-value의 value를 참조할 수 있다.

<div id="app">
  <ul>
    <li v-for="(value, name, index) in myObject">{{name}}: {{value}} : {{index}}</li>
  </ul>
</div>

마찬가지로 두번째 인자, 세번째 인자를 통해 key와 인덱스도 참조가 가능하다.

참고로, 객체를 반복할 때 순서는 보장되지 않는다.

상태유지

리액트와 마찬가지로 반복되는 요소들에 대해서 고유한 key값을 통해 최적화를 한다.

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>

따라서 가능하면 v-for를 사용할 때는 습관적으로 key값을 주자.

양방향 데이터 바인딩

기존의 v-bind를 이용하여 input과 데이터를 연결한다면 데이터가 변하면 input의 value가 변하지만, 그 반대의 경우는 불가능하다.

하지만, v-model을 사용하여 양방향으로 데이터를 바인딩할 수 있다.

<div id="app">
  <form @submit="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
           v-model="newTodoText"
           id="new-todo"
           type="text"
           placeholder="E.g. Feed the cat"
           />
    <button>Add</button>
  </form>
</div>

const App = {
  data() {
    return {
      newTodoText: "",
      todos: [],
    };
  },
  methods: {
    addNewTodo(e) {
      e.preventDefault();
      this.todos.push({
        id: generateId(),
        title: this.newTodoText,
      });
      this.newTodoText = "";
    },
};
const vm = Vue.createApp(App).mount("#app");

이제, input의 value를 변경하면 newTodoText의 데이터도 변경이 된다.

하지만, 한글의 경우 문자를 한 글자가 모두 완성되어야만 렌더링 되므로, 단축 속성인 v-model이 아닌 원래의 방식을 이용해야 한다.

<div id="app">
  <input :value="msg" @input="msg = $event.target.value" />
  <h1>{{msg}}</h1>
</div>

기존의 자바스크립트에서 데이터를 바인딩 하듯이 input 태그에 event.target.value를 바인딩 하면 된다.