vue.js 2 에서는 재사용을 어떻게 할까요?

FRONTEND

vue.js 2 에서는 재사용을 어떻게 할까요?

주니어발록 2024. 3. 17. 15:42

Vue.js는 컴포넌트 기반의 프레임워크로, 웹 페이지를 여러 개의 독립적인 컴포넌트로 나누어 개발합니다. 이 방식의 핵심 이점 중 하나는 컴포넌트의 재사용성입니다. 재사용성은 Vue.js에서 중요한 개념입니다. 컴포넌트를 재사용함으로써 코드의 반복을 줄이고, 관리를 더 효율적으로 할 수 있습니다. 하지만 재사용성은 단지 컴포넌트를 재사용하는 것을 넘어, 믹스인, 슬롯, 커스텀 이벤트, 프롭스, 디렉티브 등 Vue.js의 다양한 기능을 활용하여 코드의 재사용성을 극대화하는 것을 포함합니다. 이러한 재사용성은 개발 과정을 효율화하고, 코드의 가독성과 유지보수성을 향상합니다. 이 글에서는 이러한 Vue.js의 재사용성에 대해 더 깊이 살펴보겠습니다. vue.js 2에서는 여러가지 방법으로 컴포넌트를 재사용할 수 있습니다.

컴포넌트의 재사용 개념

Vue.js는 컴포넌트 기반의 프레임워크입니다. 이 말은 Vue.js를 이용해서 개발을 할 때, 웹 페이지를 여러 개의 독립적인 컴포넌트로 나누어 개발하게 됩니다. 이렇게 만들어진 컴포넌트는 다른 부분에서 필요할 때 재사용할 수 있습니다.

- 코드의 중복 최소화: 동일한 기능을 하는 컴포넌트를 여러 번 만들 필요가 없어져서 코드의 반복을 줄일 수 있습니다.

- 유지 보수 용이: 하나의 컴포넌트만 수정하면, 해당 컴포넌트를 사용하는 모든 곳에서 변경 사항이 적용되므로 유지 보수가 수월합니다.

- 가독성 향상: 재사용 가능한 컴포넌트를 사용하면 코드의 구조가 명확해져 가독성이 향상됩니다.

<template>
  <div>
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

믹스인의 개념

믹스인(mixins)은 Vue.js에서 여러 컴포넌트 간에 메서드, 컴퓨티드 프로퍼티, 라이프사이클 훅 등을 공유할 수 있게 해주는 기능입니다. 믹스인을 사용해 공통의 로직을 묶어서 필요한 컴포넌트에서 재사용할 수 있습니다.

- 코드의 중복 최소화: 공통의 로직을 믹스인으로 작성하면, 그 로직을 필요한 컴포넌트에서 재사용할 수 있어 코드의 중복을 줄일 수 있습니다.

- 유지 보수 용이: 수정이 필요한 로직이 믹스인에 있으면, 믹스인만 수정하면 해당 믹스인을 사용하는 모든 컴포넌트에 수정 사항이 적용되므로 유지 보수가 수월해집니다.

// mixins/checkLoginStatus.js
export default {
  created() {
    if (!this.isLoggedIn()) {
      this.redirectToLogin();
    }
  },
  methods: {
    isLoggedIn() {
      // 로그인 상태를 반환하는 로직
      // 예를 들어, 실제 상황에서는 Vuex store나 cookies, localStorage 등을 확인할 수 있습니다.
      return !!this.$store.state.user;
    },
    redirectToLogin() {
      // 로그인 페이지로 리다이렉트하는 로직
      this.$router.push('/login');
    }
  }
}

// Component.vue
<template>
  <!-- 컴포넌트 템플릿 -->
</template>

<script>
import checkLoginStatus from './mixins/checkLoginStatus';

export default {
  mixins: [checkLoginStatus],
  // 컴포넌트의 나머지 부분
}
</script>

checkLoginStatus 믹스인은 created 라이프사이클 훅에서 로그인 상태를 확인하고, 로그인이 되어 있지 않으면 로그인 페이지로 리다이렉트하는 로직을 포함하고 있습니다. 이 믹스인을 여러 컴포넌트에서 재사용함으로써 코드 중복을 줄이고 로그인 상태 확인 로직을 일관되게 관리할 수 있습니다.

슬롯의 개념

Vue.js에서 슬롯(slot)은 컴포넌트의 템플릿 안에 사용자 정의 콘텐츠를 삽입할 수 있도록 해주는 기능입니다. 이를 통해 부모 컴포넌트에서 자식 컴포넌트로 HTML 또는 다른 컴포넌트를 전달할 수 있습니다.

- 컴포넌트의 재사용성 향상: 슬롯을 사용하면, 동일한 컴포넌트에 다양한 콘텐츠를 삽입할 수 있어 컴포넌트의 재사용성이 향상됩니다.

- 코드의 가독성 향상: HTML 구조가 컴포넌트 템플릿 안에 명확하게 드러나므로 코드의 가독성이 향상됩니다.

// ChildComponent.vue
<template>
  <div>
    <slot></slot>
  </div>
</template>

// ParentComponent.vue
<template>
  <child-component>
    <p>This is some original content</p>
  </child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

커스텀 이벤트의 개념

Vue.js에서 커스텀 이벤트는 컴포넌트가 자체적으로 특정 동작이나 상태 변화를 외부에 알리기 위해 사용하는 방법입니다. 자식 컴포넌트에서 부모 컴포넌트로 통신을 할 때 주로 사용됩니다.

- 컴포넌트 간 데이터 흐름 통제: Vue.js는 단방향 데이터 흐름을 권장합니다. 이는 데이터가 항상 부모에서 자식으로 흐르게 하여 데이터 관리를 더욱 명확하고 예측 가능하게 합니다. 그러나 때때로 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해야 하는 경우가 있습니다. 이럴 때 커스텀 이벤트를 사용하면, 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트에서 감지하고 대응할 수 있습니다.

- 코드의 가독성 향상: 이벤트 이름을 적절하게 지으면 해당 이벤트가 어떤 동작을 하는지 알기 쉽게 하여 코드의 가독성을 향상시킵니다.

// ChildComponent.vue
<template>
  <button @click="emitCustomEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event', 'Hello from ChildComponent');
    }
  }
}
</script>

// ParentComponent.vue
<template>
  <child-component @custom-event="handleCustomEvent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(message) {
      console.log(message);
    }
  }
}
</script>

'ChildComponent.vue'에서 'custom-event'라는 이름의 커스텀 이벤트를 발생시킵니다. 이 이벤트는 $emit 메서드를 사용하여 발생시키며, 'Hello from ChildComponent'라는 데이터를 함께 전달합니다.

'ParentComponent.vue'에서는 'ChildComponent'에서 발생한 'custom-event'를 감지하고, handleCustomEvent 메서드를 통해 이를 처리합니다. 이렇게 커스텀 이벤트를 사용하면, 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트에서 감지하고 대응할 수 있습니다.

프롭스의 개념

Vue.js에서 프롭스(props)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. 이는 Vue.js의 단방향 데이터 흐름을 구현하는 중요한 방법 중 하나입니다.

- 컴포넌트 간 데이터 흐름 통제: 프롭스를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 데이터를 명확하게 전달할 수 있습니다. 이는 Vue.js의 단방향 데이터 흐름을 구현하고, 데이터 관리를 더욱 명확하고 예측 가능하게 합니다.

- 코드의 가독성 향상: 프롭스를 통해 전달된 데이터는 해당 컴포넌트의 독립성을 유지하면서도 필요한 정보를 제공하므로, 코드의 가독성이 향상됩니다.

// MessageComponent.vue
<template>
  <div>{{ text }}</div>
</template>

<script>
export default {
  props: ['text']
}
</script>

// ParentComponent.vue
<template>
  <message-component :text="message1"></message-component>
  <message-component :text="message2"></message-component>
</template>

<script>
import MessageComponent from './MessageComponent.vue'

export default {
  components: {
    MessageComponent
  },
  data() {
    return {
      message1: 'Hello, Vue!',
      message2: 'Goodbye, Vue!'
    }
  }
}
</script>

MessageComponent는 text라는 프롭을 통해 메시지 텍스트를 받습니다. 이렇게 하면 MessageComponent를 여러 상황에서 재사용할 수 있습니다. ParentComponent에서는 같은 MessageComponent를 두 번 사용하되, 각각 다른 메시지 텍스트를 전달합니다. 따라서, 프롭스는 컴포넌트의 재사용성을 높이는 데 중요한 역할을 합니다.

디렉티브의 개념

디렉티브의 재사용성은 주로 사용자 정의 디렉티브를 통해 나타납니다. 사용자 정의 디렉티브를 만들어서 여러 컴포넌트에서 동일한 DOM 조작 로직을 재사용할 수 있습니다.

- 코드 중복 감소: 동일한 DOM 조작 로직을 여러 컴포넌트에서 사용해야 할 때, 이 로직을 사용자 정의 디렉티브로 만들어 재사용할 수 있습니다. 이를 통해 코드 중복을 줄일 수 있습니다.

- 코드의 명확성: 디렉티브는 특정 DOM 요소에 대한 지시를 명확하게 나타내므로, 코드의 명확성을 높입니다.

// main.js 혹은 앱의 초기화 부분에서 디렉티브를 등록합니다.
Vue.directive('uppercase', {
  bind(el) {
    el.addEventListener('input', function(e) {
      e.target.value = e.target.value.toUpperCase();
    });
  }
});

// 컴포넌트에서 디렉티브를 사용합니다.
<template>
  <input type="text" v-uppercase>
</template>

v-uppercase 디렉티브는 텍스트 입력 시 자동으로 대문자로 변환하는 로직을 제공합니다. 이 디렉티브를 여러 컴포넌트에서 재사용할 수 있습니다.

이처럼 디렉티브의 재사용성은 특정 DOM 조작 로직을 모듈화하고 재사용하게 해주므로, 코드의 중복을 줄이고 명확성을 높입니다.