todo list - v-for, computed exercise

 

 

코드 설명

 

html

1. <div id="app">

Vue에서 el: '#app'을 통해 등록할 태그

 

2. <div class="todos">

div 태그

 

3. <div v-for=~ :key="todo.id">

v-for="todo in computedTodos"

Vue에 있는 computedTodos 배열을 사용하여 하나씩 꺼내서 사용

:key="todo.id" 

꺼내온 todo의 id를 반복문의 key로 사용. v-for에는 :key를 항상 사용해야 함.

:key 는 v-bind:key와 같으며 key의 속성 값을 Vue의 데이터로 사용하기 위함.

 

4. <input type="checkbox" v-model="todo.done">

체크박스 타입의 인풋태그.

v-model="todo.done"

체크여부를 todo의 done 데이터와 연동하여 사용. 사용자가 체크박스를 체크하고 해제하는 것이 todo.done의 값을 바꾸게 됨. 반대로 todo.done의 값을 바꾸면 체크박스의 체크여부가 변경됨.

 

5. <span> {{todo.title}} </span>

todo의 title 데이터를 사용

 

js

1. el: '#app' 

html태그 중 id가 app인 곳에서 사용

 

2. data: { todos: [] }

배열 데이터 todos를 만듦

 

3. computed: { computedTodos() { ... } 

자주 사용될 computed Todos를 선언함. 내부에서 사용하는 데이터가 변경되지 않는 이상 계산된 값을 계속 사용.

 return this.todos.map((todo, index) =>{     

  return {

    ...todo,

    id: index+1,

    done: false

  }

}

 

return ~  -> computedTodos 라는 이름을 사용하면 ~에 해당하는 값을 사용하게 됨.

this.todos.map -> todos의 원소 값들 각각에 대해 진행 

(todo, index) -> 원소 값이 todo에 담기고 index도 사용 가능함.

{ ...todo,   -> todo의 객체를 spread하는 문법으로 {title: '아침 먹기'} 와 같은 값이 됨.

id: index + 1  -> ...todo를 사용하고 나서 id : index+1을 하면 덮어쓰는 효과가 됨. {title: '아침 먹기', id: 1}

done: false    -> ...todo 에 id를 덮어쓴 값에 done을 추가로 덮어쓰는 효과. 결국  {title: '아침 먹기', id: 1, done: false}

 

js 코드에서 주석 처리된 코드는 밑의 코드와 동일한 결과를 나타내는데 Object.assign을 찾아보면 이해할 수 있다. 빈 객체에 todo 속성들을 덮어쓰고 그 뒤에 id, done 속성을 덮어쓰는 것이다.