[Vue] 할 일 관리 앱 만들기(2)
·
Vue.js
애플리케이션 구조 개선현재 todoApp은 데이터를 입력했을 때 목록에 바로 반영되지 않으며, clear all 버튼을 눌렀을 때로 목록에 바로 반영되지 않는다. 4개의 컴포넌트로 분리했기 때문에 한 영역에서의 처리 결과를 다른 영역에서 감지하지 못하는 것이다. 그렇다고 하나의 컴포넌트 안에서 데이터 저장, 조회, 삭제를 모두 처리하는 것은 비효율적이다. TodoInput의 newTodoItem과 TodoList의 todoItems은 모두 '할 일' 이라는 같은 데이터 속성을 사용한다. 최상위 컴포넌트인 App 컴포넌트에서 '할 일' 데이터를 정의하고 하위 컴포넌트에 props로 전달한다면 위의 문제점들을 해결할 수 있다. App 컴포넌트에서 데이터 조화, 추가, 삭제를 하고 하위 컴포넌트들은 요청(이벤..