[Vue3] provide와 inject / inject name is not a function 에러 (미완)

provide와 inject

실무에서 일하다가 vue provide와 inject를 마주쳤다.

그 전에는 부모-자식 컴포넌트 간에 데이터를 주고 받을 때 prop과 emit을 사용했다. 그런데 좀 더 큰 걸음으로 후손에게 데이터를 줄 때 사용하는 것이다. A-> B -> C 로 컴포넌트가 있는데, A -> C로 데이터 바로 주고 싶을 때 !

https://vuejs.org/guide/components/provide-inject.html

Provide / Inject | Vue.js

 

상위 컴포넌트에서는 provide로 줄 데이터를 정할 수 있다.

하위 컴포넌트에서는 inject로 받을 데이터를 정할 수 있다. 

(이 부분에 관련 코드 + 설명 추가하기)

 

@@@ is not a function 에러

그런데.. inject를 사용해서 코드를 작성했는데, 이런 에러를 만났다..

@@@ is not a function ... (@@@은 inject이름이다.)

분명히 다른 곳에서 inject할 때는 잘 됐는데, 안돼서 계속 찾아보고 고민했다.

https://stackoverflow.com/questions/71864831/how-to-avoid-vue-warn-injection-xxxx-not-found

How to avoid [Vue warn]: Injection "xxxx" not found

여기에서 보고 아래와 같이 작성하면 에러는 발생하지 않았다.

const changeInput = inject<Function>('changeInput', () => {})

changeInput inject를 받아올 건데, 그게 없으면 changeInput에 디폴트로 () => {} 를 설정해주는 것이다. 그런데 에러가 안 생기면 뭐하나.. 의도대로 동작하는 건 아닌데...

알고보니, provide 한 건 그 하위 컴포넌트에서 inject로 쓸 수 있는데 provide한 곳과 inject 한 곳이 같아서 생긴 문제였다. (

https://vuejs.org/guide/components/provide-inject.html

vue 의 inject 설명을 보면 ! `by an ancestor component` 라고 되어있다! 조상 컴포넌트가 아니라 동일한 컴포넌트라서 inject할 수 없던 것 같다.

그래서 그냥 바로 provide에서 하려던 작업을 하는 방식으로 해결했다.