[Udemy Vue 완벽가이드 Section8] 106. provide + inject vs props 및 커스텀 이벤트

provide, inject는 컴포넌트가 통신하도록 하는데 아주 유용한, Vue에 내장된 도구이다.

부모와 자식 컴포넌트 사이, 또는 부모와 자식 컴포넌트의 자식 컴포넌트 사이에서만 통신을 할 수 있다.

이웃 간에 통신하는데 사용할 수는 없다.

 

중요한 점은 또 하나 있다.

props와 커스텀 이벤트를 대체하기 위해 provide와 inject를 항상 사용해서는 안된다.

실제 props와 커스텀 이벤트가 기본 통신 메커니즘이어야 한다.

불필요하게 통과해야만 하는 컴포넌트가 있을 때, provide와 inject 사용을 고려해볼 수 있다.

 

KnowledgeBase.vue는 props를 전달하고, 발생한 이벤트를 전달하는 컴포넌트일 뿐이었다.

이런 경우는 provide, inject를 사용하면 불필요한 코드를 제거하고, 코드 베이스를 좀 더 간결하게 만들 수 있다.

 

provide-inject가 코드를 더 이해하기 어렵게 만든다고 주장할 수도 있다.

코드를 보면 App.vue에 provide한 값이 두 개가 있는데, 값이 어디에서 사용되었는지 이해하려면 모든 컴포넌트를 살펴봐야하므로.

더 큰 앱에서는 번거로워질 수 있으니 현명하게 사용하면 된다.

통과해야하는 컴포넌트가 많다면 당연히 provide-inject를 사용해야 하지만, 통과해야하는 컴포넌트가 하나라면 중복되는 코드가 생기더라도 props와 커스텀이벤트를 사용하는 것이 좋을 수 있다.

 

결국 개인 취향에 달려있다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.