Composition API:
의존성 주입 ​

provide() ​

하위 컴포넌트에서 주입할 수 있는 값을 제공합니다.

• 타입

  ts

  function provide<T>(key: InjectionKey<T> | string, value: T): void

• 세부사항

  provide()는 두 개의 인자를 받습니다: 문자열 또는 심볼이 될 수 있는 key와 주입할 값입니다.

  TypeScript를 사용할 때, key는 InjectionKey로 캐스팅된 심볼일 수 있습니다. InjectionKey는 Vue에서 제공하는 유틸리티 타입으로, Symbol을 확장하며 provide()와 inject() 간의 값 타입을 동기화하는 데 사용할 수 있습니다.

  라이프사이클 훅 등록 API와 유사하게, provide()는 컴포넌트의 setup() 단계에서 동기적으로 호출되어야 합니다.

• 예시

  vue

  <script setup>
  import { ref, provide } from 'vue'
  import { countSymbol } from './injectionSymbols'
  
  // 정적 값 제공
  provide('path', '/project/')
  
  // 반응형 값 제공
  const count = ref(0)
  provide('count', count)
  
  // Symbol 키로 제공
  provide(countSymbol, count)
  </script>

• 관련 문서

  • 가이드 - Provide / Inject
  • 가이드 - Provide / Inject 타입 지정

inject() ​

상위 컴포넌트 또는 애플리케이션(app.provide()를 통해)에서 제공한 값을 주입합니다.

• 타입

  ts

  // 기본값 없이
  function inject<T>(key: InjectionKey<T> | string): T | undefined
  
  // 기본값과 함께
  function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T
  
  // 팩토리와 함께
  function inject<T>(
    key: InjectionKey<T> | string,
    defaultValue: () => T,
    treatDefaultAsFactory: true
  ): T

• 세부사항

  첫 번째 인자는 주입 키입니다. Vue는 부모 체인을 따라 올라가며 일치하는 키로 제공된 값을 찾습니다. 부모 체인에 여러 컴포넌트가 동일한 키를 제공하는 경우, 주입하는 컴포넌트에 가장 가까운 값이 "가려지며" 해당 값이 사용됩니다. 일치하는 키의 값이 없으면, 기본값이 제공되지 않은 경우 inject()는 undefined를 반환합니다.

  두 번째 인자는 선택 사항이며, 일치하는 값이 없을 때 사용할 기본값입니다.

  두 번째 인자는 값 생성 비용이 큰 경우 값을 반환하는 팩토리 함수가 될 수도 있습니다. 이 경우, 세 번째 인자로 true를 전달하여 해당 함수가 값 자체가 아닌 팩토리로 사용되어야 함을 나타내야 합니다.

  라이프사이클 훅 등록 API와 유사하게, inject()는 컴포넌트의 setup() 단계에서 동기적으로 호출되어야 합니다.

  TypeScript를 사용할 때, key는 InjectionKey 타입일 수 있습니다. InjectionKey는 Vue에서 제공하는 유틸리티 타입으로, Symbol을 확장하며 provide()와 inject() 간의 값 타입을 동기화하는 데 사용할 수 있습니다.

• 예시

  상위 컴포넌트가 이전 provide() 예시와 같이 값을 제공했다고 가정합니다:

  vue

  <script setup>
  import { inject } from 'vue'
  import { countSymbol } from './injectionSymbols'
  
  // 기본값 없이 정적 값 주입
  const path = inject('path')
  
  // 반응형 값 주입
  const count = inject('count')
  
  // Symbol 키로 주입
  const count2 = inject(countSymbol)
  
  // 기본값과 함께 주입
  const bar = inject('path', '/default-path')
  
  // 함수 기본값으로 주입
  const fn = inject('function', () => {})
  
  // 기본값 팩토리로 주입
  const baz = inject('factory', () => new ExpensiveObject(), true)
  </script>

• 관련 문서

  • 가이드 - Provide / Inject
  • 가이드 - Provide / Inject 타입 지정

hasInjectionContext() ​

• 3.3+에서만 지원

inject()를 잘못된 위치(예: setup() 외부)에서 호출할 때 경고 없이 사용할 수 있는지 여부를 true로 반환합니다. 이 메서드는 내부적으로 inject()를 사용하되 최종 사용자에게 경고를 발생시키지 않으려는 라이브러리에서 사용하도록 설계되었습니다.

• 타입

  ts

  function hasInjectionContext(): boolean