💻 Provide

하위 컴포넌트 항목에 데이터를 제공하려면 provider 역할을 하는 상위 컴포넌트 setup() 함수 내부에 쓸 수 있다.

<script>
  import { provide } from 'vue';
 
  export default {
  	setup(){
  		provide('message', 'hello!')
  	},
  };
</script>

provide() 함수는 두 개의 파라미터를 받는다.

• 첫 번째 파라미터는 주입 키:문자열 또는 Symbol이 될 수 있다. 주입 키는 하위 컴포넌트에서 주입된 값을 조회하는데 사용된다.
• 두 번째 파라미터는 제공된 값: 값은 refs와 같은 반응성 데이터를 포함하여 모든 유형이 될 수 있다.

1-1. Reactivity

Provide / Inject를 반응성 데이터로 제공할 때 가능한 모든 변경을 provider 내부에서 하는 것이 좋다. 이렇게 Provider 내부에 배치되면 향후 유지관리가 용이하다.
만약에 Injector 내부 컴포넌트에서 반응성 데이터를 변경해야 하는 경우 데이터 변경을 제공하는 함수를 함께 제공하는 것이 좋다.

<script>
  // Provider
  const message = ref('Hi two');
  const updateMessage = () => {
  	message.value = 'world!';
  };
  provide('message', {message, updateMessage});
</script>

<script>
  // Injector
  const { message, updateMessage } = inject('message');

그리고 주입된 컴포넌트에서 제공된 값을 변경할 수 없도록 하려면 readonly() 함수를 사용할 수 있다.

<script>
  import { provide, readonly, ref } from 'vue';
  provide('count', readonly(count));
</script>

1-2. Symbol 키 사용

대규모 애플리케이션에서 다른 개발자와 함께 작업할 때 잠재적 충돌을 피하기 위해 Symbol 주입 키를 사용하는 것이 가장 좋다.

<script>
  // keys.js
  export const myInjectionKey = Symbol()
</script>

<script>
  // in provider component
  import { provide } from 'vue'
  import { myInjectionKey } from './keys.js'
  
  provide(myInjectionKey, {
   /* data to provide */
  })
</script>

<script>
  // in injector component
  import { inject } from 'vue'
  import { myInjectionKey } from './keys.js'
  
  const injected = inject(myInjectionKey)
</script>

1-3. App-level Provide

컴포넌트에서 데이터를 제공하는 것 외에 App-level에서 제공할 수도 있다.

<script>
  import { createApp } from 'vue';
  import App from './App.vue'
  const app = createApp(App);
  app.provide('appMessage', 'hello app message')
  app.mount('#app');
</script>

🔨 Provide / Inject 사용 예

App-level에서의 Provide는 앱에서 렌더링되는 모든 컴포넌트에서 사용할 수 있다. 이것은 Plugin을 작성할 때 유용합니다. Vue2에서 컴포넌트 인스턴스 객체를 추가할 때 global property에 추가 했으나, Vue3에서 Composition API setup 함수에서는 컴포넌트 인스턴스에 접근할 수 없다. 이때 대신하여 Provide / Inject를 사용할 수 있다.