Vuejs Provide와Inject 로 컴퍼넌트간 소
Vue.js 제공 및 주입: 구성 요소 간 통신을 위한 고급 방법
소개
Vue.js는 구성 요소 간 통신을 위한 다양한 방법을 제공하는 인기 있는 프런트 엔드 프레임워크이다. 이 중 provide 및 Inject은 prop이나 eventemit를 통해 수동으로 데이터를 전달할 필요 없이 중첩된 구성 요소 트리에 걸쳐 데이터를 전달할 수 있는 한 쌍의 고급 옵션이다.
provide은 ( inject는) 무엇입니까 ?
provide 및 Inject은 구성 요소 간의 종속성 주입을 구현하기 위해 Vue.js 2.2.0+에 도입된 한 쌍의 옵션이다. provide을 사용하면 하위 구성 요소가 얼마나 깊이 중첩되어 있는지에 관계없이 상위 구성 요소에 데이터를 제공하고 Inject을 통해 하위 구성 요소의 해당 데이터에 액세스할 수 있다.
provide그리고 inject의 원리
provide의 원칙 Vue.js 구성 요소 인스턴스의 상위-하위 관계를 기반으로 한다. 구성 요소가 provide를 통해 데이터를 제공하면 해당 데이터가 상위 구성 요소의 개체에 추가된다 provide. 그러면 하위 구성요소는 inject옵션을 통해 이 데이터를 얻을 수 있다.
provide 및 inject 원칙은 Vue.js 구성 요소 인스턴스의 상위-하위 관계를 기반으로 한다. 구성 요소가 제공을 통해 데이터를 제공하면 해당 데이터가 상위 구성 요소의 제공 개체에 추가된다. 그러면 하위 구성 요소는 주입 옵션을 통해 이 데이터를 얻을 수 있다.
예제를 통해 작업을 제공하고 주입하는 방법을 자세히 살펴보겠습니다.
<template>
<div>
<p>부모 데이터：{{ ancestorData }}</p>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent';
export default {
provide: {
ancestorData: '이것은 상위 구성요소의 데이터이다.'
},
components: {
ChildComponent
}
};
</script>
위의 예에서 조상 구성 요소는 provide 옵션을 통해 조상 데이터라는 데이터를 제공한다. 하위 구성 요소 ChildComponent는 inject 옵션을 통해 이 데이터를 얻을 수 있다.
<template>
<div>
<p>자식컴퍼넌트：{{ injectedData }}</p>
</div>
</template>
<script>
export default {
inject: ['ancestorData'],
data() {
return {
injectedData: this.ancestorData
};
}
};
</script>
하위 구성 요소에서는 주입 옵션을 사용하여 액세스하려는 데이터를 선언한 다음 데이터에 주입된 데이터로 저장한다.
provide 및 inject의 사용법
provide 및 inject은 주로 다음과 같은 상황에서 사용된다.
-
전역 구성: 루트 구성 요소에서 제공 옵션을 사용하여 전역 구성 정보를 제공한 다음 삽입을 사용하여 모든 구성 요소에서 이 정보에 액세스할 수 있다.
-
교차 레벨 통신: provide 및 inject을 통해 소품이나 이벤트를 통해 수동으로 데이터를 전달할 필요 없이 구성 요소 트리를 통해 데이터를 전달할 수 있다.
-
공유 인스턴스: 상위 구성 요소에서 공유 인스턴스를 만든 다음 이 인스턴스를 하위 구성 요소에서 공유할 수 있다.
-
플러그인 개발: 플러그인 가능한 플러그인이나 라이브러리를 개발하는 경우 구성이나 서비스를 쉽게 공유할 수 있는 방법을 제공하고 주입한다.
provide및 inject의 고급 사용법
기본값
데이터가 제공되지 않는 경우 주입에 대한 기본값을 제공할 수 있다. 이는 개체의 제공 속성을 래핑하고 기본 속성을 설정하여 달성할 수 있다.
<template>
<div>
<p>자식컴퍼넌트：{{ injectedData }}</p>
</div>
</template>
<script>
export default {
inject: {
ancestorData: { default: '기본 데이터' }
},
data() {
return {
injectedData: this.ancestorData
};
}
};
</script>
위의 예에서 상위 구성 요소가 데이터를 제공하지 않으면 ancestorData 하위 구성 요소는 기본값을 사용한다. .
동적 provide
동적 제공 제공 옵션은 데이터를 동적으로 제공할 수 있는 기능을 허용할 수 있다. 이는 사용자의 로그인 상태에 따라 다양한 사용자 데이터를 제공하는 등 특정 시나리오에서 유용하다.
<template>
<div>
<p>사용자 데이터：{{ userData }}</p>
</div>
</template>
<script>
export default {
provide() {
return {
userData:js
this.loggedIn ? this.user : null
};
},
data() {
return {
loggedIn: true,
user: {
name: 'ninja_zero',
email: 'ninja_zero@dx-ninja.com'
}
};
}
};
</script>
위의 예에서 제공 옵션은 userData 속성이 포함된 객체를 반환한다. 사용자가 로그인한 경우 userData 속성에는 사용자 데이터가 포함된다. 그렇지 않으면 null이 된다.
동적 inject
inject 옵션은 함수를 허용하여 동적으로 데이터를 얻을 수도 있다. 이는 조건에 따라 어떤 데이터를 주입할지 결정해야 할 때 유용하다.
코드 복사
<template>
<div>
<p>사용자 데이터：{{ userData }}</p>
</div>
</template>
<script>
export default {
inject: ['user'],
computed: {
userData() {
if (this.user) {
return `이름：${this.user.name}, 메일：${this.user.email}`;
} else {
return '미등록';
}
}
}
};
</script>
위의 예에서는 inject를 사용하여 사용자 데이터를 주입한다. 그런 다음 계산된 속성 userData를 사용하여 사용자가 로그인했는지 여부에 따라 사용자 데이터를 동적으로 생성한다.
사용 시나리오
- 여러 구성 요소가 일부 공통 데이터나 상태를 공유해야 하는 경우 Provide 및 inject를 사용하여 이 데이터를 공유할 수 있다. 최상위 컴포넌트에 데이터를 제공한 후 주입을 통해 모든 하위 컴포넌트에서 사용한다. 이러한 방식으로 데이터를 편리한 방식으로 공유할 수 있으며 구성 요소 간에 데이터가 여러 번 전송되는 것을 방지할 수 있다. 플러그인 또는 타사 라이브러리 통합: 제공 및 주입은 일부 플러그인이나 타사 라이브러리의 기능을 구성 요소에 캡슐화하고 다른 구성 요소가 해당 기능을 공유하도록 해야 할 때 사용할 수 있다.
- 크로스레벨 구성 요소 통신: 구성 요소 계층 구조가 깊고 서로 다른 수준의 구성 요소 간에 데이터를 전송해야 하는 경우 제공 및 주입을 사용할 수 있다.
상위 구성 요소는 제공을 통해 데이터를 제공하고 하위 구성 요소는 주입 주입을 사용한다. 이러한 방식으로 레이어별로 소품을 전달하거나 통신을 위해 이벤트 버스를 사용하는 것을 피할 수 있다. - 플러그인 또는 타사 라이브러리 통합 :일부 플러그인이나 타사 라이브러리의 기능을 구성 요소로 캡슐화하고 다른 구성 요소가 해당 기능을 공유하도록 해야 할 때 provide및 inject 를 사용할 수 있다.
단점
데이터의 소스는 추적할 수 없다 . 모든 수준에서 액세스할 수 있으므로 데이터 추적이 어렵습니다. 어느 레이어에서 이를 선언하는지, 어느 레이어에서 이를 사용하는지 알 수 없다.
구성 요소 간 결합을 유발한다 . 구성 요소 간 결합을 유발하여 구성 요소 재사용성에 영향을 줍니다.
요약
provide및 inject은 Vue.js에서 구성 요소 간의 여러 계층에 걸쳐 데이터를 전달하는 고급 방법이다. 이는 글로벌 구성, 교차 레벨 통신, 공유 인스턴스 및 플러그인 개발과 같은 다양한 시나리오에 적합한다. 제공 및 주입의 원리와 사용법을 깊이 이해하면 Vue.js의 기능을 더 잘 활용하고 보다 대화형이고 반응성이 뛰어난 프런트 엔드 애플리케이션을 구축하는 데 도움이 된다.
추가로 컴퍼넌트간 통신하는 방법이 더 있는데 간단히 소개해본다.
방법 1. props/$emit : 부모-자식이 끈끈하게 연결되어 있는구조로서 다층복합으로 구성된 경우에는 prop과 emit 지옥이 펼쳐진다.
방법 2, on : 한쪽이 emit과 함께 데이터를 던지면 on 으로 받는쪽에서 받은 자료를 처리하는구조이다. emit과 on 의 개수가 많아지면 관리가 어렵다.
방법 3. vuex : vue에서 전역 혹은 모듈별로 저장소를 통해서 데이터 전달이 가능하다. dispatch 와 commit, getter 로 관리되며, 별도의 저장소를 통해 데이터를 관리하기 때문에 단순히 부모자식 이 일대일의 간단한 구조에서 컴퍼넌트간에 데이터를 전달할때는 다소 과잉된 방법이기도 하다.
방법 4. listeners : Vue2.4에 등장한 속성-리스너 방식으로 여러 대상에 대한 데이터전달할경우에 유용하다.
방법 5, provide/inject : 본 글에서 설명한 내용이다.
방법 6, $parent/ $children그리고ref : 구성요소를 직접 참고하는 것으로 깊은 커플링으로 인해 사용을권하지 않는다.
방법 7, v-model : v-model은 Vue.js에서 제공하는 Syntactic Sugar를 기반으로 한 컴포넌트 통신 방법이며, v-model이 지정된 컴퍼넌트는 v-model에 정의된 값을 동시에 변경가능한다.
