vue.js 재사용 컴포넌트

레이아웃 컴포넌트와 그리드 컴포넌트는 Vue.js 애플리케이션에서 페이지 레이아웃을 관리하고 UI를 구성하는 데 사용됩니다. 이 두 가지 컴포넌트를 활용하면 코드를 간결하게 유지하고 재사용성을 높일 수 있습니다.

레이아웃 컴포넌트 (Layout Components):

레이아웃 컴포넌트는 여러 페이지에서 공통으로 사용되는 UI 요소를 정의하고 관리하는 데 사용됩니다. 일반적으로 헤더, 푸터, 사이드바와 같은 요소들을 포함하며, 이를 통해 코드의 재사용성과 일관성을 유지할 수 있습니다.

장점:

• 코드의 재사용성을 높여 유지보수를 용이하게 합니다.
• 페이지 간에 일관된 UI를 제공하여 사용자 경험을 향상시킵니다.
• 프레젠테이션 로직을 비즈니스 로직과 분리하여 코드를 명확하고 읽기 쉽게 만듭니다.

그리드 컴포넌트 (Grid Components):

그리드 컴포넌트는 요소들을 그리드 형태로 나열하는 데 사용됩니다. 주로 반응형 디자인을 구현하거나 레이아웃을 조정할 때 활용됩니다. 각 요소의 위치와 크기를 설정하여 유연한 레이아웃을 구성할 수 있습니다.

장점:

• 요소들을 정렬하고 배치하는 데 유용한 도구로 활용됩니다.
• 다양한 화면 크기에 대응하여 반응형 디자인을 쉽게 구현할 수 있습니다.
• 코드를 간결하게 유지하고 가독성을 높여줍니다.

활용 방법:

1. 레이아웃 컴포넌트와 그리드 컴포넌트 만들기:
   • 각각의 컴포넌트를 만들어 공통된 UI 요소와 그리드 레이아웃을 정의합니다.
2. 페이지에 적용하기:
   • 레이아웃 컴포넌트를 사용하여 페이지의 구조를 정의하고, 그리드 컴포넌트를 활용하여 요소들을 배치합니다.
3. 데이터 전달과 이벤트 처리:
   • 필요한 경우 Props를 사용하여 데이터를 전달하고, 이벤트를 처리하여 상호작용성을 추가합니다.

예시:

<template>
  <Layout>
    <template #header>
      <Header />
    </template>
    <main>
      <Grid :cols="2">
        <Article v-for="article in articles" :key="article.id" :article="article" />
      </Grid>
    </main>
    <template #footer>
      <Footer />
    </template>
  </Layout>
</template>

<script>
import Layout from '@/components/Layout.vue';
import Grid from '@/components/Grid.vue';
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import Article from '@/components/Article.vue';

export default {
  components: {
    Layout,
    Grid,
    Header,
    Footer,
    Article,
  },
  data() {
    return {
      articles: [...], // 게시물 데이터
    };
  },
};
</script>

<style scoped>
/* 필요한 스타일링 추가 */
</style>

 

위 예시에서는 레이아웃 컴포넌트를 사용하여 헤더와 푸터를 정의하고, 그리드 컴포넌트를 사용하여 게시물을 그리드 형태로 나열합니다. 이를 통해 페이지의 구조를 정의하고 UI를 관리할 수 있습니다.