[Vue.js] 컴포지션(Composition) - provide와 inject

 

◽ 개요

부모와 자식 컴포넌트 사이의 데이터 전달은 일반적으로 props를 통해 이루어진다.

depth가 깊지않은 경우에는 props로도 충분하지만 더 많은 계층을 가지는 경우에 모든 컴포넌트에 prop를 전달해야한다.

이렇게 depth가 많아지는 경우, provide와 inject를 사용하면 된다.

 

 

 

💡 참고

Vue에서는 아래 2가지 사항을 제외하고는 "장거리 props"라고 생각하면 된다고 말한다.
1. 부모 컴포넌트는 어떤 하위 컴포넌트가 provide된 속성을 사용하는지 알 필요가 없다.
2. 자식 컴포넌트는 inject된 속성이 어디서 왔는지 알 필요가 없다.

 

 

◽ provide와 inject

- provide - 부모 컴포넌트가 데이터 제공을 위해 사용하는 옵션

- inject - 자식 컴포넌트가 데이터 사용을 위해 사용하는 옵션

 

 

◽ 예제

예제 1. 일반적인 사용

const app = Vue.createApp({})

// 부모 컴포넌트
app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    user: 'John Doe'
  },
  template: `
    <div>
      {{ todos.length }}
      <!-- 나머지 템플릿 -->
    </div>
  `
})

// 자식 컴포넌트
app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`) // > Injected property: John Doe
  }
})

 

예제 2. 일부 컴포넌트 인스턴스 속성을 provide하는 경우

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  /* 이렇게 사용하면 작동하지 않는다.
  provide: {
    todoLength: this.todos.length // 'Cannot read property 'length' of undefined`라는 오류가 발생합니다.
  },
  */
  
  // 이렇게 provide를 객체로 반환하는 함수로 변환(return)해서 사용해야한다.
  provide() {
    return {
      todoLength: this.todos.length
    }
  },
  template: `
    ...
  `
})

 

 

출처

Provide / inject | Vue.js

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.