인프런 커뮤니티 질문&답변

안녕하세요. Vue.js 중급편을 듣고 있는 수강생입니다.

다름이 아니라, App.vue > toggleOneItem의 이벤트로 넘어온 todoItem을 수정하는 것이 안티패턴이라고 하신 것은 이해가 되었는데,
localStorage.setItem(todoItem.item, JSON.stringify(todoItem));

에서는 todoItem을 그대로 사용하여, localStorage에 저장하는 방식은 조금 이해가 되지 않습니다. 위 문단의 안티패턴과는 상관없지만 this.todoItems[index]의 필드 수정된 것이 todoItem이 참조하고 있기 때문에 변경 처리되었으니 localStorage에 저장한다는 의미가 되는데, 굳이 그렇게 하는 것보다는 명확하게 하기 위해서

이벤트로 index만 받고,

toggleOneItem: function (index) {
      let todoItem = this.todoItems[index]
      todoItem.completed = !todoItem.completed
      localStorage.removeItem(todoItem.item)
      localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
},

이렇게 했을 때, App 컴포넌트의 todoItems를 핸들링하는 것을 명확하게 알 수 있지않을까 했습니다.

• 이렇게 구현했을 때의 구현상의 안좋은 패턴이 되는 요소가 있는지 궁금합니다.