[Vue] Vue3 defineExpose 사용 가이드

defineExpose는 Vue 3에서 자식 컴포넌트의 API를 부모 컴포넌트에 직접적으로 공개하는 강력한 기능입니다. 기존의 props, emit 방식보다 더 효율적이고 유연한 데이터 전달 방식을 제공하며, 컴포넌트 간의 코드 재사용성을 높여줍니다.

1. defineExpose 기본 원리

defineExpose는 자식 컴포넌트의 setup() 함수 내에서 사용됩니다. 객체를 인수로 받아, 공개하고 싶은 컴포넌트 내부 API를 키-값 쌍 형태로 정의합니다.

자식 컴포넌트 (ChildComponent.vue)

import { defineExpose } from 'vue';

export default {
  setup() {
    const data = ref('초기 데이터');
    const addData = (value) => {
      data.value += value;
    };

    // defineExpose를 사용하여 data와 addData 함수를 공개
    defineExpose({
      data,
      addData
    });

    return {
      // ... 템플릿 로직
    };
  }
};

 

부모 컴포넌트 (ParentComponent.vue)

<template>
  <div>
    <child-component ref="childComponent"></child-component>

    <p>data: {{ childComponent.data }}</p>

    <button @click="addData">data 값 증가</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    // ref를 사용하여 ChildComponent 인스턴스 참조
    const childComponent = ref(null);

    // addData 함수 정의 (childComponent의 addData 함수 호출)
    const addData = () => {
      if (childComponent.value) childComponent.value.addData(10);
    };

    return {
      childComponent,
      addData
    };
  }
};
</script>

2. defineExpose 주요 장점

• 효율적인 데이터 전달: props, emit 방식과 달리, defineExpose는 자식 컴포넌트의 데이터를 직접 참조하므로, 중간 데이터 전달 과정이 생략되어 성능이 향상됩니다.
• 간결한 코드: props, emit 코드를 작성할 필요가 없어 코드가 더욱 간결하고 명확해집니다.
• 재사용성 향상: 자식 컴포넌트의 API를 직접적으로 공개하기 때문에, 다른 컴포넌트에서 쉽게 재사용할 수 있습니다.
• 유연성: 다양한 형태의 API (데이터, 함수, 심지어 컴포넌트 자체)를 공개할 수 있습니다.

3. defineExpose 활용 사례

• 자식 컴포넌트의 버튼 클릭 이벤트를 부모 컴포넌트에서 직접 처리
• 자식 컴포넌트의 데이터를 부모 컴포넌트에서 실시간으로 변경
• 자식 컴포넌트의 함수를 부모 컴포넌트에서 재사용
• 다중 자식 컴포넌트의 API를 부모 컴포넌트에서 통합 관리

4. defineExpose 사용 시 주의점

• defineExpose는 자식 컴포넌트의 내부 API를 직접적으로 공개하기 때문에, 주의해서 사용해야 합니다. 부모 컴포넌트에서 실수로 자식 컴포넌트의 상태를 변경하면 예상치 못한 동작이 발생할 수 있습니다.
• 공개하려는 API는 명확하고 일관된 방식으로 명명해야 다른 개발자가 쉽게 이해할 수 있습니다.
• 너무 많은 API를 공개하면 코드가 복잡해질 수 있으므로, 필요한 API만 선택적으로 공개하는 것이 좋습니다.

5. defineExpose 관련 추가 정보

• 공식 문서: [유효하지 않은 URL 삭제됨]
• 예제 코드: [유효하지 않은 URL 삭제됨]
• 커뮤니티 토론: [유효하지 않은 URL 삭제됨]

6. 마무리

defineExpose는 Vue 3에서 컴포넌트 간 데이터 전달 및 코드 재사용성을 높여주는 강력한 도구입니다. 기본 원리, 장점, 활용 사례, 주의점 등을 이해하고, 프로젝트에 적절하게 활용하여 코드의 효율성과 유지 관리성을 개선하세요.