Vue 컴포넌트를 나눌때 어떤 기준으로 나누시나요?
안녕하세요? Vue.js 를 접한지 얼마되지 않은 개발자입니다.
컴포넌트 단위로 개발하는 방식은 처음이라서 신세계를 경험하고 있는데요.
요즘에는 코딩하는 시간보다 어떤 기준으로 컴포넌트를 나눌지 구조를
고민하는 시간이 더 길어졌습니다.
Vue 고수님들은 어떤 기준으로 컴포넌트를 나누시나요?
안녕하세요! 말씀하신 부분 저도 굉장히 공감이 많이 되네요.
저희 회사도 Vue 로 프론트를 짰는데 컴포넌트를 너무 적게 빼면
코드가 복잡하고 길어지는데, 그렇다고 중복을 피하기 위해 컴포넌트를 너무 많이 만들면
나중에 한 컴포넌트를 수정했는데 여러 컴포넌트가 영향 받는 상황을 자주 접하게 되더라고요.저처럼 Vue 컴포넌트 구조 및 프로젝트 구조를 고민하시는 개발자분들이 많은 것 같습니다.
그래서 인터넷에도 여러 사람 의견이 있는데, 아시겠지만 반드시 어떻게 해야한다라는 것은 없는 것 같습니다.
제가 인터넷에서 본 것 중 구조가 세련됐다고 생각되었던 폴더 구조 추천 드립니다.
https://medium.com/tldr-tech/vue-js-2-vuex-router-yarn-basic-configuration-version-2-7b9c489d43b3
컴포넌트 용도에 따라서 위치하는 폴더가 명확히 구분되어 있어서 깔끔하게 구조잡는데 도움이 되는 것 같습니다.하나 더 참고로 말씀드리면, 컴포넌트를 분리하는 방법으로, 리액트에서 온 컨셉인데
Smart and dumb components 라는 컨셉이 있습니다.dumb (presentational 라고도 함) 컴포넌트는 컨텐츠를 사용자에게 보여주는 게 목적이고, smart 컴포넌트는 로직과 state를 관리합니다.
MVC 패턴에 비유하자면, dumb component가 view, smart component가 controller라고 할 수 있습니다.
Vue.js 공식 문서의 스타일가이드에서도 찾아보실 수 있습니다.
https://vuejs.org/v2/style-guide/#Base-component-names-strongly-recommendedsmart component 는 dumb component를 끌어다 쓰며, smart component는 state와 기타 추가 method를 갖는 형태라고 이해하시면 좋을 것 같습니다. 네이밍은 저는 가이드에 따라서 보통 dumb - BaseCard, smart - UserCard, QuestionCard 와 같은 패턴으로 사용하고 있습니다.