Vue : hasInjectionContext란?

---

🕵️ hasInjectionContext 란?

Vue 3 Compositon API의 헬퍼 함수로, 현재 코드가 종속성 주입(Context Injection)을 사용할 수 있는 환경(컨텍스트) 안에 있는지를 확인하는 데 사용된다.
현재 컴포넌트가 Vue의 종속성 주입 시스템에 접근할 수 있는지를 알려준다. Vue.js 문서

function hasInjectionContext(): boolean

---

1. 사용 목적

Vue 컴포넌트는 부모에서 제공된 종속성을 provide와 inject를 통해 사용할 수 있다. 하지만 종속성 주입은 Vue의 컴포넌트 컨텍스트 안에서만 동작하기 때문에 컴포넌트 외부(ex: 독립적으로 실행되는 함수)에서는 접근할 수 없다.

hasInjectionContext를 사용하면, 코드가 컴포넌트 컨텍스트 안에 있는지 동적으로 확인하고 안전하게 inject를 호출할 수 있도록 한다.

📣쉽게 vue의 컴포넌트 컨텍스트 안에서만 작동하니 종속성 주입이 되는지 여부를 확인하고 나서, 안전하게 inject를 호출할 수 있게 하기위해 사용한다.

---

2. hasInjectionContext의 사용법

import { inject, hasInjectionContext } from 'vue'; 

export function useMyInjectedValue() { 
	if (hasInjectionContext()) { 
		const injectedValue = inject('myKey', 'defaultValue'); 
		
		return injectedValue; 
	} else { 
		console.warn('No injection context available!'); 
		
		return 'defaultValue'; // 기본값 반환 
	}

hasInjectionContext(): 현재 코드가 컴포넌트 컨텍스트 내에 있는지 반환한다.

• true: 종속성 주입 가능.
• false: 종속성 주입 불가능.

---

3. 주요 특징

• 동작 방식 : 현재 코드가 Vue의 컴포넌트 컨텍스트 안에 있는지 반환 true | false
• 사용 이유 : 독립적인 유틸리티 함수 또는 라이브러리에서 inject 호출이 안전한지 확인
• 주 사용 사례 : 독립 유틸리티 함수, 컴포넌트 내부와 외부에서 모두 호출 가능한 코드

---

4. 주의점

컴포넌트 내부에서는 항상 true 반환

컴포넌트 내부에서 hasInjectionContext()는 항상 true를 반환하므로, 내부에서는 직접 inject를 호출하는 것이 더 간단할 수 있다.

컴포넌트 외부에서는 inject 불가

inject는 컨텍스트가 없는 곳에서 호출하면 런타임 에러가 발생하므로, 외부 함수에서는 반드시 hasInjectionContext()로 확인 후 호출해야 한다.

---

즉, 종속성 주입 시스템이 없는 경우를 안전하게 처리하는 방법이라고 이해하면 될 거 같다.