[Vue.js] Vue 컴포넌트 간 속성 전달을 위한 expose 이해하기

expose란?

Vue.js 3에서 도입된 expose 옵션은 부모 컴포넌트에 의해 자식 컴포넌트로 전달되는 속성 중에서 명시적으로 노출할 속성을 지정하는 데 사용됩니다. 이를 통해 부모 컴포넌트가 자식 컴포넌트에게 전달하는 속성 중에서 일부만 노출하여 컴포넌트 인터페이스를 더 명확하게 정의할 수 있습니다.

예제

아래 예제에서는 부모 컴포넌트에서 전달된 title 속성 중에서 자식 컴포넌트에서 노출할 속성을 지정하는 방법을 보여줍니다.

부모 컴포넌트 (ParentComponent.vue):

<template>
  <ChildComponent :title="title" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      title: '부모 컴포넌트에서 전달한 제목'
    };
  }
}
</script>

자식 컴포넌트 (ChildComponent.vue):

<template>
  <div>
    <h2>{{ exposedTitle }}</h2>
    <p>전달받은 제목: {{ title }}</p>
  </div>
</template>

<script>
import { expose } from 'vue';

export default {
  props: ['title'],
  setup(props) {
    const exposedTitle = props.title;

    expose({
      exposedTitle
    });

    return {
      exposedTitle
    };
  }
}
</script>

설명

• 부모 컴포넌트에서 자식 컴포넌트로 title 속성을 전달합니다.
• 자식 컴포넌트에서는 expose 함수를 사용하여 노출할 속성을 정의합니다. 여기서는 전달받은 title 속성을 exposedTitle로 노출합니다.
• 자식 컴포넌트에서 expose 함수를 사용하여 노출한 속성은 해당 컴포넌트를 사용하는 외부에서 접근할 수 있습니다.

주요 특징

• 명시적 노출: 컴포넌트 인터페이스를 더 명확하게 정의할 수 있습니다.
• 보안 강화: 컴포넌트의 노출된 속성만을 외부에 노출하여 보안을 강화할 수 있습니다.