Vue 컴포넌트 계층 구조
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
Vue.js를 사용하는 웹 개발자, 특히 컴포넌트 기반 아키텍처를 처음 접하는 초보자
핵심 요약
- 컴포넌트 계층 구조는
루트 컴포넌트
,부모 컴포넌트
,자식 컴포넌트
로 구성되며, 각 역할이 명확히 구분됨 - 재사용 가능하고 독립적인 UI 단위로 설계되어 팀 협업과 유지보수에 유리
App.vue
는 앱 전체를 감싸는 루트 컴포넌트,Header.vue
와MainContent.vue
는 부모 컴포넌트 역할ProductCard.vue
와Button.vue
는 자식 컴포넌트로, 부모 내에서 재사용 가능
섹션별 세부 요약
1. 컴포넌트의 정의와 역할
- 컴포넌트는 재사용 가능한 UI 단위로, EC사이트의 상품 카드, 검색 바 등 구체적인 기능을 담음
- 루트 컴포넌트 (App.vue)는 앱의 최상위 계층이며, 전체 앱을 감싸는 역할
- 부모 컴포넌트는 여러 자식 컴포넌트를 포함하고 조합하는 역할
- 자식 컴포넌트는 특정 기능만 처리하며, 부모 내에서 반복적으로 사용 가능
2. 컴포넌트 계층 구조 예시
App.vue
→Header.vue
및MainContent.vue
(부모) →ProductCard.vue
및Button.vue
(자식)- 계층 구조는 상위 → 하위 방향으로 구성되며, 데이터 흐름은 하위 → 상위 방향으로 전달 가능
- 각 컴포넌트는 독립적인 기능과 스타일을 가지므로 개발 및 테스트가 개별적으로 가능
3. 컴포넌트 기반 개발의 장점
- 모듈화로 인해 코드 재사용성과 유지보수성이 향상
- 팀 개발 시 역할 분담이 용이하며, 별도의 테스트가 가능
- UI 일관성 유지 및 디자인 시스템 구축에 유리
결론
- Vue 앱은 루트 → 부모 → 자식 계층 구조로 설계해 재사용성과 확장성을 높이세요.
App.vue
를 최상위 컴포넌트로 설정하고, 기능 단위로 작은 컴포넌트를 분리하는 것이 실무 적용 시 핵심입니다.