Vue 프로젝트에서 views와 components 폴더의 차이

Vue.js 프로젝트를 진행하다 보면 views와 components 폴더를 자주 마주하게 됩니다. 두 폴더 모두 Vue 컴포넌트 파일(.vue)을 저장하는 공간이지만, 어떤 기준으로 파일을 분류해야 할지 헷갈리는 경우가 많습니다. 이 글에서는 views와 components 폴더의 차이점을 명확하게 설명하고, 각 폴더에 어떤 종류의 컴포넌트를 배치해야 하는지에 대한 가이드를 제공합니다.

 

728x90

views 폴더: 페이지를 구성하는 최상위 컴포넌트의 집합

• 주요 역할: 라우터를 통해 접근 가능한 개별 페이지를 구성하는 최상위 컴포넌트를 담당합니다.
• 특징:
  • 보통 하나의 페이지를 구성하는 전체적인 레이아웃과 구조를 담고 있습니다.
  • 다른 컴포넌트들을 조합하여 페이지를 완성합니다.
  • 라우팅 설정과 밀접하게 연관되어 있습니다.
• 예시:
  • 홈페이지(Home.vue)
  • 상품 목록 페이지(ProductList.vue)
  • 회원 가입 페이지(SignUp.vue)

 

728x90

components 폴더: 재사용 가능한 작은 단위의 컴포넌트의 집합

• 주요 역할: 페이지를 구성하는 작은 단위의 컴포넌트를 모아두는 곳입니다.
• 특징:
  • 재사용성이 높은 컴포넌트들을 모아둡니다. (예: 버튼, 입력 필드, 네비게이션 메뉴 등)
  • views 컴포넌트에서 여러 번 사용될 수 있습니다.
  • 논리적으로 분리된 작은 기능들을 담당합니다.
• 예시:
  • 버튼 컴포넌트 (Button.vue)
  • 입력 필드 컴포넌트 (Input.vue)
  • 카드 컴포넌트 (Card.vue)

views와 components의 차이점 요약

특징	views	components
역할	페이지 구성	재사용 가능한 작은 단위의 컴포넌트
크기	상대적으로 크고 복잡	상대적으로 작고 단순
독립성	라우팅과 연결되어 독립적인 페이지를 구성	다른 컴포넌트와 조합되어 사용
재사용성	낮음	높음

 

왜 views와 components를 분리해야 할까요?

• 코드 재사용성 증가: components 폴더에 재사용 가능한 컴포넌트를 모아두면 코드 중복을 줄이고 유지보수를 용이하게 합니다.
• 코드 가독성 향상: 컴포넌트를 기능별로 분리하면 코드를 이해하기 쉽고, 다른 개발자와의 협업 시에도 효율적입니다.
• 프로젝트 구조 개선: 명확한 폴더 구조를 통해 프로젝트를 관리하고 유지보수하기 쉽습니다.

 

views와 components 폴더는 Vue.js 프로젝트에서 컴포넌트를 관리하는 데 있어서 매우 중요한 역할을 합니다. 각 폴더의 특징을 이해하고 적절하게 활용하면 더욱 효율적이고 유지보수가 용이한 Vue.js 애플리케이션을 개발할 수 있습니다.

 

추가 팁:

• 프로젝트의 규모와 복잡도에 따라 폴더 구조를 더 세분화할 수 있습니다. 예를 들어, components 폴더 내에 atoms, molecules, organisms 등으로 하위 폴더를 만들어 컴포넌트를 더욱 체계적으로 관리할 수 있습니다.
• Vue CLI를 사용하면 프로젝트 생성 시 기본적인 폴더 구조가 제공되므로, 이를 참고하여 프로젝트를 시작하는 것이 좋습니다.