[ToDo 프로젝트] 구조의 문제점

• 한 쪽 컴포넌트에서 변화가 일어났을 때 다른 컴포넌트에서 자동으로 변화를 갱신하지 못한다는 문제점.

컴포넌트간 통신

• 데이터에 대한 행위를 최상위 컴포넌트에서 통제하도록 만들고 반영되어 출력되는 곳에 props로 넘겨준다.

이론 적용하기

• 최상위 컴포넌트 App.vue에 데이터 속성 todoItems를 선언

• 선언한  데이터 속성을 하위 컴포넌트에 props로 전달한다.

 

App.vue

 

• Input 태그에는 버튼 클릭 시 최상위 컴포넌트로 이벤트를 전달 할 수 있게 v-on 디렉티브를 추가해준다.

하위 컴포넌트를 구조에 맞게 수정하기

• 로컬 스토리지에 직접 저장하는 로직은 삭제한다.

ToDoInput.vue

• 대신 값을 전달하는 emit method를 사용한다.

ToDoInput.vue

• 상위 컴포넌트에서 올려보낸 값들을 받아서 로컬 스토리지에 저장하도록 하는 로직을 짠다.

App.vue

• 로컬 스토리지의 정보를 출력하는 하위 컴포넌트에서 propsdata값을 출력하도록 로직을 변경한다.

ToDoList.vue

• 하위 컴포넌트에서 불필요한 로직들을 제거하고 로컬스토리지를 저장하는 로직을 상위 컴포넌트로 올린다.

ToDoList.vue

toDoItems도 propsdata로 바꿔준다.

이벤트 전달을 이용한 버튼 기능 개선

• 하위 컴포넌트에서 발생시킨 이벤트를 상위 컴포넌트에서 받아 상위 컴포넌트의 메소드를 작동시키는 것이다.

상위 컴포넌트에서 하위 컴포넌트 이벤트 받기

상위 컴포넌트 로컬 스토리지 지우기 메소드

• this.emit('하위컴포넌트 메소드')를 이용한다. 상위 컴포넌트에서 removeAll을 받아 clearAll을 작동시킨다.

ToDoList에서 clearToDo를 수정한다

• 나머지 컴포넌트들도 로컬스토리지와 관련된 로직을 상위 컴포넌트로 옮겨준다.

상위 컴포넌트 App.vue

하위 컴포넌트 ToDoList.vue

상위 컴포넌트 App.vue