function 리팩토링시 function expression 형식으로 리팩토링하면 동작이 안되나요?

Question

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 = []; } 하지만 에러가 나고 실행이 되지 않았습니다. 저는 두 방식이 같은것인줄 알았는데 뭔가 착각을 하고 있던것 같습니다. 혹시 두 방식이 어떤 차이점이 있는지 알려주실 수 있나요?

캡틴판교 · Answer

안녕하세요 경민님, 좋은 질문이네요! ES5 이전 함수 선언 방식과 화살표 함수의 차이는 단순히 문법이 바뀌는 것 이외에 함수의 실행 컨텍스트도 변경됩니다. 실행 컨텍스트를 이해하는 가장 쉬운 방법은 화살표 함수로 변경하기 전과 후에 각각 this를 콘솔에 찍어보시면 알 수 있을 것 같아요. 정리하자면, 뷰 인스턴스 옵션 속성에는 화살표 함수를 직접 적용하시면 안됩니다. 각 옵션 속성의 내부에서 비동기 처리 로직을 구현하실 때 화살표 함수를 쓰시는 게 좋을 것 같아요 :) 강의 수강해주셔서 감사합니다.