[Vue.js] inject: 컴포넌트에서 부모 컴포넌트가 제공한 데이터 액세스 이해하기

 

1. 개요

Vue.js에서 inject 옵션은 부모 컴포넌트가 제공한 데이터를 자식 컴포넌트에서 액세스하는 데 사용되는 기능입니다. 이 옵션을 사용하면 provide 옵션과 함께 데이터를 효율적으로 공유하고 코드 재사용성을 높일 수 있습니다.

inject 옵션은 다음과 같은 상황에서 유용하게 사용됩니다.

• 부모 컴포넌트에서 정의된 데이터를 자식 컴포넌트에서 사용해야 할 때
• 컴포넌트 계층 구조가 복잡하고 데이터를 props를 통해 전달하기 어려울 때
• 코드의 의존성을 줄이고 유연성을 높이고 싶을 때

2. inject 옵션 사용 예시

다음은 inject 옵션을 사용하는 예시입니다.

부모 컴포넌트 (MyParent.vue)

HTML

<template>
  <div>
    <my-child />
  </div>
</template>

<script>
export default {
  name: 'MyParent',
  provide() {
    const message = 'Hello from parent!';
    return {
      message,
    };
  },
};
</script>

<style scoped>
/* 스타일 정의 */
</style>

 

자식 컴포넌트 (MyChild.vue)

HTML

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  name: 'MyChild',
  inject: ['message'],
  setup() {
    // inject된 데이터를 사용합니다.
    const message = inject('message');
    return {
      message,
    };
  },
};
</script>

<style scoped>
/* 스타일 정의 */
</style>

 

설명:

• 부모 컴포넌트 MyParent는 provide 옵션을 사용하여 message라는 데이터를 제공합니다.
• 자식 컴포넌트 MyChild는 inject 옵션을 사용하여 부모 컴포넌트에서 제공된 message 데이터를 액세스합니다.

3. inject 옵션의 장점

inject 옵션을 사용하면 다음과 같은 장점을 얻을 수 있습니다.

• 데이터 액세스 간편화: 부모 컴포넌트가 제공한 데이터를 자식 컴포넌트에서 쉽게 액세스하고 사용할 수 있습니다.
• 코드 의존성 감소: props를 통해 데이터를 전달하는 방식보다 코드 의존성을 줄이고 유연성을 높일 수 있습니다.
• 테스트 용이: 컴포넌트를 독립적으로 테스트하기 용이합니다.

4. 주의 사항

• inject 옵션은 Vue 2.6 이상 버전에서만 사용할 수 있습니다.
• inject 옵션은 문자열 배열 또는 객체 형식으로 사용해야 합니다.
• inject 옵션은 부모 컴포넌트에서 provide 옵션을 통해 제공된 데이터만 액세스할 수 있습니다.

5. inject 옵션과 함께 사용할 수 있는 다른 옵션

• provide: 부모 컴포넌트에서 자식 컴포넌트들에게 데이터를 제공하는 데 사용됩니다.
• watch: 데이터 변화를 감지하고 반응하는 데 사용됩니다.
• computed: 데이터 변화에 따라 계산된 값을 제공하는 데 사용됩니다.