Vue [07-2] TodoList 예제 리팩토링

◈ 컴포넌트 분할 기준

- 한번에 변경되는 데이터를 렌더링하는 UI 단위로 컴포넌트 분할 -> 변경된 데이터만 다시 랜더링

◈ 데이터 관리

- 화면 단위의 데이터와 메서드 기능을 상위 컴포넌트에 집중

 

◈ 메서드

[메서드 목록]

 - addTodo(todo)

 - deleteTodo(id)

 - toggleCompleted(id)

 

[수신 이벤트 목록]

 - add-todo: 전달 인자-todo

 - delete-todo: 전달 인자-id

 - toggle-completed : 전달인자-id

 

◈ 컴포넌트

[컴포넌트 목록]

* App 컴포넌트

  - data: todoList 배열

  - methods: addTodo, deleteTodo, toggleCompleted 메서드

  - 수신 이벤트: add-todo, delete-todo, toggle-completed

 

* Input Todo 컴포넌트

  - data: todo 문자열 값

  - 발신 이벤트: add-todo

 

* TodoList 컴포넌트

  - props: todoList 배열 (todoList)

  - 발신이벤트: delete-todo(경유). toggle-completed(경유)

  - 수신이벤트: delete-todo(경유). toggle-completed(경유)

 

* TodoListItem 컴포넌트

  - props: todoItem( todoList 배열의 값 하나)

  - 발신 이벤트: delete-todo, toggle-completed