Vue3 - Provide/Inject

📌 목차

• Introduction
• What is Provide/Inject?
• Usage
• Reactice Usage
• Conclusion
• Reference

📌 Introduction

안녕하세요. 이번 포스팅에서는 새로운 provide/inject에 대해서 알아보겠습니다. 해당 코드는 여기서볼수 있습니다.

📌 What is Provide/Inject?

만약 이런 상황이라고 가정해볼게요.

상위의 부모에서 물론 props로 전달이 가능하겠지만 좀더 깔끔한 방법으로 한번에 전달할 순 없을까요?

네 그게 provide/inject입니다. 🎉

📌 Basic Usage

컴포넌트 구조 입니다.

|_App -> provide ⭐️
  |_MyDiv1
    |_MyDiv2
      |_MyDiv3
        |_InjectedPractice -> inject ⭐️

// App.vue

import { provide } from 'vue';
import MyDiv1 from './components/MyDiv1';

export default {
  name: 'App',
  components: {
    MyDiv1
  },
  setup() {
    provide('location', 'North Pole'); // 여기서 provide를 합니다.
  }
};

// InjectedPractice.vue

import { inject } from 'vue';

export default {
  setup() {
    const userLocation = inject('location', 'The universe');
    console.log(userLocation); // North Pole로 찍힙니다.
    return {
      userLocation
    };
  }
};

이렇게 해줄수 있습니다.

📌 Reactice Usage

// App.vue

import { provide, ref } from 'vue';
import MyDiv1 from './components/MyDiv1';

export default {
  name: 'App',
  components: {
    MyDiv1
  },
  setup() {
    const location = ref('North Pole');
    const updateLocation = () => {
      location.value = 'South Pole';
    };
    provide('location', location); // reactice로 내려줄수있습니다. ⭐️
    provide('updateLocation', updateLocation); // update 함수도 같이 내려줄게요. ⭐️
  }
};

// InjectedPractice.vue
import { inject } from 'vue';

export default {
  setup() {
    const userLocation = inject('location', 'The universe');
    const userUpdateLocation = inject('updateLocation'); // userLocation이 South Pole로 변경이 됩니다. ⭐️
    return {
      userLocation,
      userUpdateLocation
    };
  }
};

📌 Conclusion

이렇게 Vue3에서의 provide와 inject에 대해서 알아보았습니다. 이방법으로 간단한 프로젝트들은 굳이 vuex를 사용해야할까? 라는 의문이 듭니다. 아마 react에서의 context api와 useReducer와 같은 개념일것으로 추측이 됩니다. 그럼 다음 포스팅에서 만나요~~

📌 Reference

• Vue3 공식 문서