VueJS 컴포넌트 구조화 하기

VueJS 컴포넌트 구조화 하기

Written by Alex Jover Morales

Vue를 배우기 시작하자마자 아키텍처의 기본 구성 단위가 “component”라는 것을 알게 됩니다. 사실, 그것은 Vue에만 국한된 것이 아닙니다. React 또는 Angular와 같은 모든 component-based 기술은 동일한 방식으로 작동합니다.

그런 다음 “component”와 구성 방법에 대해 자세히 알아봅니다. 더 복잡한 “component”를 만들기 위해 고유한 “component”를 만들고 결합하고 다른 통신 패턴을 적용하기 시작합니다. 확실히 잘하고 있고 “component”를 가능한 한 작게 유지하여 응용 프로그램의 여러 위치에서 일부를 재사용할 수 있습니다.

그러나 어느 시점에서 애플리케이션이 커집니다. 많은 “component”가 있고 상황이 복잡해지기 시작합니다. 올바른 “component”를 찾고 그 책임을 알기가 어려우면 유지 관리가 어려워지기 시작합니다.

걱정하지 마세요. 이 기사에서는 애플리케이션 “component”를 구성하는 데 사용할 수 있는 다양한 방법과 팁을 볼 것입니다.

첫 단계: Pages

응용 프로그램을 처음부터 시작할 때 일반적으로 볼 수 있는 기본 구조에는 main.js 항목 파일 및 App.vue “component”와 함께 components 폴더가 있습니다.

src/
    main.js
    App.vue
    components/

잠시 후 몇 가지 “component”가 생깁니다. 해당 구조의 매우 간단한 예는 다음과 같습니다.

components/
        ArticlePage.vue
        ArticleTitle.vue
        ArticleList.vue
        AppButton.vue
        AppFooter.vue
        AppHeader.vue
        LastArticlesSection.vue
        AppList.vue
        UserPage.vue

Note
Vue’s style guide multi-word rule 에 따르면 “component”의 이름을 지정할 때 한 단어를 사용하지 말라고 합니다. 그래서 일부에 “App*“이라는 접두사를 붙입니다.

“component” 기반 기술에서는 모든 것이 “component”입니다. 그런 사실을 가지고 우리는 그들을 분류하는 방법을 생각해야합니다.

위의 구조를 보면 pages라는 한 가지 유형의 “component”를 쉽게 식별할 수 있습니다. 따라서 페이지 “component”를 배치할 수 있을 때 pages 폴더를 만들 수 있습니다.

components/
        ArticleTitle.vue
        ArticleList.vue
        AppButton.vue
        AppFooter.vue
        AppHeader.vue
        LastArticlesSection.vue
        AppList.vue
pages/
        ArticlePage.vue
        UserPage.vue

그것은 쉬운 분할이며 이미 우리에게 약간의 구조를 제공하므로 페이지 “component”를 배치하고 검색할 위치를 알 수 있습니다.

그러나 페이지는 일반적으로 더 많은 “component” 또는 섹션으로 구성됩니다. ArticlePage와 관련하여 ArticleTitle, ArticleList 및 LastArticlesSection “component”가 표시됩니다.

ArticleTitle 및 LastArticlesSection은 ArticlePage에만 존재한다고 가정하지만 ArticleList는 기사 목록을 가져오고 렌더링하는 “component”이며 여러 위치에서 사용할 수 있습니다.

이러한 사실을 감안할 때 ArticleTitle 및 LastArticlesSection이 해당 페이지와 함께 공통 폴더에 배치되는 것이 합리적입니다.

components/
        ArticleList.vue
        AppButton.vue
        AppFooter.vue
        AppHeader.vue
        AppList.vue
pages/
        ArticlePage/
                index.vue
                ArticleTitle.vue
                LastArticlesSection.vue
        UserPage.vue

또한 ArticlePage.vue의 이름을 index.vue로 변경했습니다. 모듈 확인이 작동하는 방식 덕분에 기사 페이지를 다음과 같이 가져올 때:

import ArticlePage from "@/pages/ArticlePage"

pages/ArticlePage.vue 또는 pages/ArticlePage/index.vue에서 가져옵니다. 이러한 이유로 페이지를 “component”로 만들기 시작하고 나중에 가져오는 방법을 변경하지 않고도 나중에 폴더로 이동할 수 있으므로 리팩토링이 더 쉬워집니다.

Common components

components 폴더에는 여전히 역할과 도메인이 혼합된 “component”가 있습니다.

UI “component”에는 앱 전체에서 재사용 가능한 또 다른 분할 지점이 있습니다. 그들은 “logic”을 보유하지 않고 props와 events를 사용하여 통신합니다.

이 예제의 구조에서 AppButton 및 AppList “component”가 그 중 하나임을 알 수 있으므로 ui 폴더 아래에 배치하겠습니다.

components/
        ui/
                AppButton.vue
                AppList.vue
        ArticleList.vue
        AppFooter.vue
        AppHeader.vue
pages/
        ArticlePage/
                index.vue
                ArticleTitle.vue
                LastArticlesSection.vue
        UserPage.vue

그러나 AppFooter 및 AppHeader “component”는 정확히 UI “component”가 아닙니다. 대신 앱에는 바닥글과 머리글이 하나만 있기 때문에 레이아웃 “component”와 비슷합니다. 필요는 없지만 원하는 경우 layout 폴더로 이동할 수 있습니다.

components/
        layout/
                AppFooter.vue
                AppHeader.vue                
        ui/
                AppButton.vue
                AppList.vue
        ArticleList.vue
pages/
        ArticlePage/
                index.vue
                ArticleTitle.vue
                LastArticlesSection.vue
        UserPage.vue

ArticleList “component”는 어떻습니까? 다른 페이지에서 재사용할 수 있는 “component”를 가질 수 있으므로 페이지 “component”와 함께 배치해서는 안 됩니다. 그러나 그들은 특정 도메인에 속합니다. 이 경우에는 article 도메인에 속합니다.

이를 도메인 구성요소라고 부르겠습니다. 구성하는 좋은 방법은 도메인당 하나의 폴더인 components 아래의 별도 폴더에 배치하는 것입니다.

components/
        article/
                AppList.vue
        layout/
                AppFooter.vue
                AppHeader.vue                
        ui/
                AppButton.vue
                AppList.vue
pages/
        ArticlePAge/
                index.vue
                ArticleTitle.vue
                LastArticlesSection.vue
        UserPage.vue

다시 말하지만 경로가 이미 대표이므로 Article 접두사를 제거할 수 있습니다. 사실, 이제 두 개의 List “component”가 있습니다.

import ArticleList from "@/components/article/List"
import AppList from "@/components/ui/AppList"

마지막으로 나머지 “component”는 어떻습니까? 도메인에 속하지 않고 ui 또는 layout이 아닌 “component”가 있을 수 있습니다. 논리가 있지만 렌더링을 자식 “component”에 위임하는 일종의 유틸리티 “component”일 수 있습니다.

예를 들어 자식이 화면에서 교차할 때를 감지하는 Observer “component”를 상상해 보십시오.

Another example is vue-no-ssr: SSR(Server-Side Rendering)을 적용하거나 Nuxt를 사용하는 경우 클라이언트에서 실행될 때만 자식을 렌더링하는 “component”.

common 폴더 아래에 이러한 종류의 분류되지 않은 common components를 배치할 수 있습니다.

components/
        article/
                AppList.vue
        common/
                AppObserver.vue
                NoSSR.vue
        layout/
                AppFooter.vue
                AppHeader.vue                
        ui/
                AppButton.vue
                AppList.vue
pages/
        ArticlePage/
                index.vue
                ArticleTitle.vue
                LastArticlesSection.vue
        UserPage.vue

마무리

우리는 애플리케이션 “component”를 구성하는 다양한 기술을 보았습니다. 도움이 될지 안될지 모르지만 적어도 지금부터 사용할 수 있는 아이디어가 있기를 바랍니다.