이벤트 위치에 대한 궁금증 입니다.
219
1 asked
리스트에서 실행하는 함수를 App으로 빼는 이유가 궁금합니다.
그외에 이벤트 같은 경우 다른 자식 컴포넌트에 영향도가 있기때문에 App으로 이동시키는거는 이해가 되나,
토글 이벤트 같은 경우는 다른 자식 컴포넌트에 영향도가 없을것 같은데 App으로 이동하는 이유가 궁금합니다.
해당 방식으로 컴포넌트를 설계하면 결합도가 높아 다른곳에서 사용이 불가능하거나 확장성이 낮지 않나요?
Answer 2
0
안녕하세요, 데이터 관련 로직을 한 곳에 응집시킨다고 생각해 주시면 될 것 같아요. 그리고 설계는 정답이 없기 때문에 말씀하신 곳에 기능 동작이 보장되는 선에서 다른 곳에 두셔도 상관 없습니다 :)
0
안녕하세요, 인프런 AI 인턴입니다.
jwjeong님, 리스트에서 실행하는 함수를 상위 컴포넌트로 이동시키는 이유는 주로 상태 관리의 편의성 때문입니다. Vue.js에서는 데이터 흐름을 명확하게 관리하기 위해서 일반적으로 단방향 데이터 흐름을 권장합니다. 이는 데이터를 감시하고, 자식 컴포넌트에 데이터를 전달하며, 사용자 인터랙션이 있을 때 이벤트를 발생시킬 수 있도록 설계하는 것을 의미합니다.
토글 이벤트가 다른 자식 컴포넌트에 영향을 끼치지 않을 것 같다고 여겨질 수 있지만, 예를 들어 상태에 따라 여러 컴포넌트의 구현 로직이 변경될 수 있고, 또한 나중에 이 기능이 확장되어 다른 컴포넌트에도 영향을 미치게 될 수 있기 때문에, 처음부터 상위 컴포넌트에서 관리하는 것이 유지보수와 기능 확장에 있어 더욱 수월할 수 있습니다.
또한, 설계에 있어서 결합도가 높아짐으로 인한 재사용성 및 확장성의 저하는 Vue.js의 믹스인(mixins)이나 고급 상태 관리 패턴(Vuex)을 통해서 개선될 수 있습니다. 이러한 패턴을 사용함으로써 공통 기능을 재사용 가능한 형태로 분리하고, 여러 컴포넌트에서 해당 기능을 쉽게 사용할 수 있으며, 상태 관리 또한 명확하게 수행할 수 있습니다.
컴포넌트의 설계가 프로젝트의 특성과 미래의 확장성을 고려하여 적절히 수행되어야 하며, 때에 따라 유연한 설계 방식이 요구될 수 있습니다.
Chrome 개발자 모드 확장이 안됨
0
250
1
깃 권한 요청드립니다
0
116
1
vue.js 중급 리포지토리 권한 관련
0
118
1
vuex + axios 질문 있습니다!
1
198
2
깃 권한 요청드립니다!
0
160
1
강의 깃주소 문의
0
142
1
router-view에 props를 어떻게 넘길 수 있나요?
1
277
2
Vue가 인식되지 않는 현상
0
205
1
기초강좌는 어디있나요?
1
190
2
App.vue가 필요한 이유
0
192
1
getter가 정의되어 있지 않아 오류가 발생합니다.
1
253
1
뷰 라이프사이클
1
187
1
TSLint 말고 TSLint Vue 설치해도 되나요?
1
367
3
로컬 스토리지는 어디에 있나요?
1
279
1
vuex 실행시 새로고침해야지만 리스트에 나타나는 현상
1
387
2
export default 관련한 질문
0
354
2
깃허브 vue-todo 접근불가에 따른 확인요청
1
354
2
깃허브에 문제있는것 같습니다.
1
273
2
인프런 강의 재생 화면 구성 변경 문의드립니다
1
302
2
addTodo Helper 함수 적용
1
242
1
vuex 헬퍼 전역 설정
1
241
2
github 권한요청드립니다.
1
254
2
구조 차이에 대한 문의
1
341
2
TodoList.vue에서 삭제 처리를 위한 emit이 작동하지 않습니다.
1
563
2