인프런 커뮤니티 질문&답변
작성한 질문수
function 리팩토링시 function expression 형식으로 리팩토링하면 동작이 안되나요?
작성
·
204
1
App.vue 파일에서
methods: {
addOneItem(todoItem) {
const obj = { completed: false, item: todoItem };
localStorage.setItem(todoItem, JSON.stringify(obj));
this.todoItems.push(obj);
},
removeOneItem(todoItem, index) {
localStorage.removeItem(todoItem.item);
this.todoItems.splice(index, 1);
},
toggleOneItem(todoItem, index) {
this.todoItems[index].completed = !this.todoItems[index].completed;
// localStorage.removeItem(todoItem.item);
localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
},
clearAllItems() {
localStorage.clear();
this.todoItems = [];
}
}
강의에서는 위와 같은 형식으로 리팩토링을 진행하셨는데
저는 처음에 아래와 같이 리팩토링을 해봤었습니다.
methods: {
addOneItem: (todoItem) => {
const obj = { completed: false, item: todoItem };
localStorage.setItem(todoItem, JSON.stringify(obj));
this.todoItems.push(obj);
},
removeOneItem: (todoItem, index) => {
localStorage.removeItem(todoItem.item);
this.todoItems.splice(index, 1);
},
toggleOneItem: (todoItem, index) => {
this.todoItems[index].completed = !this.todoItems[index].completed;
// localStorage.removeItem(todoItem.item);
localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
},
clearAllItems: () => {
localStorage.clear();
this.todoItems = [];
}
하지만 에러가 나고 실행이 되지 않았습니다.
저는 두 방식이 같은것인줄 알았는데 뭔가 착각을 하고 있던것 같습니다. 혹시 두 방식이 어떤 차이점이 있는지 알려주실 수 있나요?
답변 1
1
장기효(캡틴판교)
지식공유자
안녕하세요 경민님, 좋은 질문이네요! ES5 이전 함수 선언 방식과 화살표 함수의 차이는 단순히 문법이 바뀌는 것 이외에 함수의 실행 컨텍스트도 변경됩니다. 실행 컨텍스트를 이해하는 가장 쉬운 방법은 화살표 함수로 변경하기 전과 후에 각각 this를 콘솔에 찍어보시면 알 수 있을 것 같아요. 정리하자면, 뷰 인스턴스 옵션 속성에는 화살표 함수를 직접 적용하시면 안됩니다. 각 옵션 속성의 내부에서 비동기 처리 로직을 구현하실 때 화살표 함수를 쓰시는 게 좋을 것 같아요 :)
강의 수강해주셔서 감사합니다.