강의

멘토링

커뮤니티

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

후루루룹님의 프로필 이미지
후루루룹

작성한 질문수

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

[리팩토링] 할 일 완료 기능

질문있습니다.

작성

·

182

1

--체크하는 메소드

checkItems: function (todoItem,index) {

this.todoItems[index].completed =! this.todoItems[index].completed;

localStorage.setItem(todoItem.item, JSON.stringify(todoItem));

}

안티패턴때문에 위에

this.todoItems[index].completed =! this.todoItems[index].completed;

이 부분에서 App.vue에 선언된 todoItems를 this를 사용하여 코딩하잖아요.

그렇다면 하위컴포넌트에서 $emit으로 가져온 데이터 todoItem,index를 사용하는것도 안티패턴인가요???

이 데이터도 propsdata에 영향을 받은게 아닌가 싶어서 질문 올립니다.

답변 1

1

캡틴판교님의 프로필 이미지
캡틴판교
지식공유자

안녕하세요 후루루룹님,

좋은 질문이네요! 할 일 체크하는 코드 관련해서 질문 주신 것 같은데 결론부터 말씀드리면 todoItem, index를 다른 곳에서 받아 변형하지 않기 때문에 안티 패턴이라고 보지 않으셔도 될 것 같아요..! 특정 컴포넌트의 데이터는 해당 컴포넌트에서만 변경한다는 규칙만 어긋나지 않게 코딩하시면 좋을 것 같습니다 :)

후루루룹님의 프로필 이미지
후루루룹

작성한 질문수

질문하기