Vue 컴포넌트 계층 구조

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Vue.js를 사용하는 웹 개발자, 특히 컴포넌트 기반 아키텍처를 처음 접하는 초보자

핵심 요약

  • 컴포넌트 계층 구조루트 컴포넌트, 부모 컴포넌트, 자식 컴포넌트로 구성되며, 각 역할이 명확히 구분됨
  • 재사용 가능하고 독립적인 UI 단위로 설계되어 팀 협업과 유지보수에 유리
  • App.vue는 앱 전체를 감싸는 루트 컴포넌트, Header.vueMainContent.vue부모 컴포넌트 역할
  • ProductCard.vueButton.vue자식 컴포넌트로, 부모 내에서 재사용 가능

섹션별 세부 요약

1. 컴포넌트의 정의와 역할

  • 컴포넌트는 재사용 가능한 UI 단위로, EC사이트의 상품 카드, 검색 바 등 구체적인 기능을 담음
  • 루트 컴포넌트 (App.vue)는 앱의 최상위 계층이며, 전체 앱을 감싸는 역할
  • 부모 컴포넌트는 여러 자식 컴포넌트를 포함하고 조합하는 역할
  • 자식 컴포넌트는 특정 기능만 처리하며, 부모 내에서 반복적으로 사용 가능

2. 컴포넌트 계층 구조 예시

  • App.vueHeader.vueMainContent.vue (부모) → ProductCard.vueButton.vue (자식)
  • 계층 구조는 상위 → 하위 방향으로 구성되며, 데이터 흐름은 하위 → 상위 방향으로 전달 가능
  • 각 컴포넌트는 독립적인 기능과 스타일을 가지므로 개발 및 테스트가 개별적으로 가능

3. 컴포넌트 기반 개발의 장점

  • 모듈화로 인해 코드 재사용성과 유지보수성이 향상
  • 팀 개발 시 역할 분담이 용이하며, 별도의 테스트가 가능
  • UI 일관성 유지 및 디자인 시스템 구축에 유리

결론

  • Vue 앱은 루트 → 부모 → 자식 계층 구조로 설계해 재사용성과 확장성을 높이세요.
  • App.vue를 최상위 컴포넌트로 설정하고, 기능 단위로 작은 컴포넌트를 분리하는 것이 실무 적용 시 핵심입니다.