Vue 3 ) Provide ?

Provide 란?

일반적으로 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때는 props 를 이용합니다. 하지만 부모와 자식 관계가 깊어질수록 props 로 데이터를 전달하는 데는 한계가 있습니다.

Vue2 까지는 이 문제를 해결하기 위해 Event Bus 를 생성하거나 Vuex 에 데이터를 담았었습니다.

하지만 Vue3 에서는 Event Bus 와 같이 비정형적 데이터 전송이 프로젝트의 관리를 어렵게 하기 때문에, $on, $off, $once 와 같은 이벤트 method 를 모두 삭제했습니다.

Vue3 에서는 Provide/Inject 를 활용해 이러한 문제를 해결할 수 있습니다.
부모 컴포넌트에서 어떤 데이터를 provide 해주면 자식 컴포넌트에서 해당 데이터를 inject 해서 사용할 수 있습니다.

기본적으로 provide 하는 데이터는 반응성을 가지지 않습니다. 다시 말해, provide 한 데이터가 변경되어도 inject 한 데이터가 변경되지 않습니다. 이를 반응형으로 변경하기 위해서는 vue 에서 제공하는 ref/reactive 를 이용하거나 computed 를 이용하면 됩니다.

주의할 점은 provide 는 객체의 속성을 바로 보낼수 없다는 것입니다. 이 경우에는 getter 함수를 만들어 값을 전달하는 방법이 있습니다.

provide: { my_property: object.property }
provide() {
  return {
    my_property: object.property
  }
}

ref/reactive 를 통해 반응성을 갖도록 만들어진 변수를 provide 하면 inject 후에도 반응성을 갖게 됩니다. 이럴 경우 inject 한 자식 컴포넌트에서 변수를 변경해도 모든 영역의 provide 한 변수의 값이 변경됩니다.
이는 구현에 있어 매우 편리하지만, 코드의 관리를 어렵게 합니다. 따라서 일반적으로 반응성을 가지는 변수를 provide 할 때는 readonly 로 전달하며, 대신 update 할 수 있는 함수도 같이 provide 해줍니다.

Provide 를 이용한 변수와 함수의 공유

const addTodo = (id) => {}   // 함수를 선언

provide('addTodo', addTodo)   // provide