[Vue3, TypeScript] provide, inject 사용예제

페이지 네비게이션바가 있는 모든 페이지가 문제가 발생중이다. 가령, 1페이지에서 다른 페이지로 이동 후
검색조건을 변경하여 검색하면 조회 되지 않는 문제가 발생중이다. 그 이유는 페이지 초기화가 안되고 이동한 페이지(가령 3페이지)에서 검색을 하기 때문이다.

원인은 찾았고, 해결을 해야하는데, 모든 페이지에서 submit하기전에 page = 1로 초기화 해서 해결할 수 있는데 손이 공통으로 한번에 처리가 안될까?

inject는 Vue의 의존성 주입(Dependency Injection) 시스템의 일부로,
부모 컴포넌트에서 제공(provide)한 값을 자식 컴포넌트에서 주입(inject) 받아 사용하는 기능입니다.

import { inject } from "vue";
const searchParams = inject('searchParams');

이 코드는 부모 컴포넌트가 provide('searchParams', someValue)로 제공한 값을
자식 컴포넌트에서 inject('searchParams')로 받아오는 것이다.

// 부모 컴포넌트

const { searchParams } = storeToRefs(store);  //피냐

<script setup lang="ts">
  import { provide } from 'vue';

  
  // SearchBox 컴포넌트에서 사용할 수 있도록 searchParams provide
  const searchParams = ref({ keyword: '', page: 1 });
  provide('searchParams', searchParams);
</script>

// 자식 컴포넌트


<script setup lang="ts">
  import { inject } from 'vue';

  //const searchParams = inject('searchParams');
  //console.log(searchParams.value.keyword);

  // 검색 시 페이지 초기화
  if (searchParams?.value) {
      searchParams.value.page = 1;
  }
</script>

inject()의 특징

inject를 언제 쓰나?

• Props처럼 내려주기 싫을 때
• 많은 자식/손자 컴포넌트들이 같은 값을 써야 할 때
• 전역 컨텍스트처럼 쓰고 싶을 때 (예: 테마, 설정, 검색 상태)

🛠 참고: 타입 명시

const searchParams = inject<Ref<SearchParamsType>>('searchParams');

타입스크립트 환경이라면 이렇게 타입을 명확히 해주면 더 안전하게 사용할 수 있어요.

만약에 부모 컴포넌트에서 provide(‘searchParams’, searchParams);를 안하면
자식 컴포넌트에서 동작만 안할뿐, 오류는 발생안할까?

Vue에서 inject('searchParams')를 호출했는데 부모 컴포넌트에서 provide('searchParams', ...)를 안 했을 경우:

결과

• 오류는 발생하지 않습니다.
• 대신 undefined가 반환됩니다.
• 그래서 이후에 searchParams.value처럼 접근하면 런타임 오류가 발생할 수 있습니다.

const searchParams = inject('searchParams');
console.log(searchParams); // undefined
console.log(searchParams.value); // ❌ TypeError: Cannot read property 'value' of undefined

✅ 안전하게 쓰는 방법 (기본값 제공)

const searchParams = inject('searchParams', ref({ keyword: '', page: 1 }));

혹은 타입스크립트 사용 시:

const searchParams = inject<Ref<SearchParamsType>>('searchParams');

if (!searchParams) {
  throw new Error('searchParams is not provided!');
}

💡 요약

필요하면 inject할 때 기본값을 넣거나, null 체크/예외 처리를 함께 해주세요.

결론

inject는 상위 컴포넌트에서 provide()로 넘겨준 값을 하위 컴포넌트에서 받아오는 함수입니다.
Vue 3의 Composition API에서 상위-하위 간 데이터 공유를 간결하게 처리할 수 있게 도와줍니다.