[콜럼Vue스] provide, inject를 이용한 공용데이터 사용

참고자료 : 원쌤의 Vue.js 퀵스타트

provide와 inject는 부모-자식 컴포넌트 간의 데이터 전달을 간소화하는 기능이다. 복잡한 컴포넌트 계층 구조에서, 각 계층을 거쳐 속성을 전달할 필요 없이 상위 컴포넌트에서 제공한 데이터를 하위 컴포넌트에서 바로 사용할 수 있게 한다.

 

 

컴포넌트의 계층 구조가 복잡해지면 계층 구조를 따라 연속적으로 속성을 전달해야 하는 문제가 있음

해결방법 => provide, inject를 이용

 

provide/inject의 원리와 사용법

• provide: 상위 컴포넌트에서 하위 트리에 공유할 데이터를 제공함.
• inject: 하위 컴포넌트에서 상위에서 제공한 데이터를 주입받아 사용함.
• 이 패턴은 컴포넌트 간 깊은 계층 구조에서도 데이터를 쉽게 전달할 수 있도록 돕는다.