Vue.js] 16. Component > Provide / Inject

일반적으로 부모에서 자식 컴포넌트로 데이터를 전달할 때 prop을 사용한다. 그러나 깊이 중첩된 경우 먼 조상 컴포넌트의 데이터가 필요한 경우 props만 있으면, 전체 부모 체인에 동일한 prop을 전달해야 한다. 

Footer 컴포넌트는 해당 prop이 필요하지 않지만, DeepChild가 필요할 수 있다. 하위 트리의 모든 컴포넌트는 깊이에 상관없이 상위 체인의 컴포넌트에서 제공하는 의존성을 주입할 수 있다. 

Provide

컴포넌트의 하위 항목에 데이터를 제공하려면 provide 옵션을 사용한다. 

export default {
  provide: {
    message: '안녕!'
  }
}

App-level Provide

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* 키 */ 'message', /* 값 */ '안녕!')

 

Inject

부모 컴포넌트에서 제공하는 데이터를 주입하려면 inject 옵션을 사용한다. 

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // 주입된 값
  }
}

data()에서 주입된 속성 접근할 수 있다. 

 

다른 로컬 키를 사용하려면 inject 옵션에 object syntax를 사용한다. 키가 제공되지 않은 경우 런타임 경고가 표시되며 필수적으로 제공하지 않는 환경에서 작동하도록 하려면 기본값을 선언한다. 

export default {
  // 주입에 대한 기본값을 선언할 때
  // 객체 구문이 필요합니다.
  inject: {
    message: {
      from: 'message', // 주입 시 키와 같은 이름을 사용하는 경우 선택사항입니다.
      default: '이것은 기본 값 문자열 입니다.'
    },
    user: {
      // 생성하는 데 비용이 많이 드는 기본이 아닌 값 또는 컴포넌트 인스턴스마다
      // 고유해야 하는 값에 대해 팩토리 함수를 사용합니다.
      default: () => ({ name: '철수' })
    }
  }
}