현재 애플리케이션 구조의 문제점
문제 해결을 위한 애플리케이션 구조 개선
같은 데이터 속성을 사용하기 위해 최상위(루트) 컴포넌트 App 컴포넌트에 items라는 데이터를 정의하고, 하위 컴포넌트 list에 props를 전달하자.
그 전에는 할 일 데이터 추가, 삭제 모두 하위 컴포넌트 Input, List 에서 했다. 하지만 이제 vue 데이터 속성 Items와 로컬 스토리지의 데이터 조회, 추가, 삭제를 모두 app component에서 진행!
하위 컴포넌트들은 그 데이터를 표현하거나, 데이터 조작에 대한 요청(이벤트만 발생)만 하는 것!
Input.vue
this.$emit('addTodo', value);
TodoInput 컴포넌트의 addTodo()메서드에 위와 같은 코드를 추가하였다. 이벤트를 전달할 때 할 일 텍스트 값인 value 객체를 인자 값으로 전달한다.
App.vue
methods : {
addTodo(Item) {
// 로컬 스토리지에 데이터를 추가하는 로직
localStorage.setItem(Item, Item);
this.Items.push(Item);
}
}
컴포넌트 간 이벤트 전달은 '하위 컴포넌트에서 발생시킨 이벤트를 상위 컴포넌트에서 받아 상위 컴포넌트의 메서드를 동작시키는 것'
App.vue
methods : {
clearAll() {
localStorage.clear();
this.Items = [];
},
clearAll()메서드는 Footer 컴포넌트의 clear all 버튼을 클릭했을 때 로컬 스토리지의 데이터를 모두 삭제하고 Items 데이터를 비운다.
footer.vue
methods: {
clearTodo() {
this.$emit('removeAll')
// 로컬 스토리지의 데이터를 모두 삭제함
}
}
footer의 clear all 버튼을 클릭하면 removeAll 이벤트를 발생시켜 상위 컴포넌트 (App.vue)로 전달함. 그럼 상위 컴포넌트에서 removeAll을 받아 상위 컴포넌트에 정의된 clearAll()를 실행함.
[❗]
$emit() API 형식과 전달 인자의 규칙
하위 컴포넌트에서 이벤트를 발생시켜 상위 컴포넌트로 신호를 보낼 때 $emit()을 사용함
API기본 형식은
$emit('이벤트 이름')이지만 $emit('이벤트 이름', 인자1, 인자2, ..)와 같은 형식으로 하위 컴포넌트의 특정 데이터를 전달할 수 있음!!
주의할 점은 전달받은 인자 값은 상위 컴포넌트에서 참고용으로만 활용하기! 데이터 값은 변경하지 말아야 함!
결론: 컴포넌트가 불리되어 데이터를 공유하지 못했던 문제점을 props속성, 이벤트 전달로 해결함 😀😀😀
[Reference]
Do it Vue.js 입문(이지스퍼블리싱)