[Vue.js] provide/inject 에 대해 알아보기

Jeong Woo Ahn
Jun 6, 2018 · 3 min read

Vue.js 부모가 자식 컴포넌트에게 값을 전달하는 방법 중 가장 직관적이고 기본적인 방법은 Props이다. 자식 컴포넌트에 props를 아래와 같이 작성하면 바로 직계 부모로부터 데이터를 받을 수 있다.

부모 컴포넌트는 2번 라인처럼 템플릿에서 자식 컴포넌트에 속성과 같은 형태로 값을 전달하고, 자식 컴포넌트는 7번-16번 라인처럼 타입과 기본값, validate 함수 등을 정의한다. 그냥 배열 형태로 props : ['age'] 와 같이 간단히 설정할 수 있지만 위와 같이 type/default/required 정도의 옵션은 항상 사용하길 권장한다.

provide / inject

오늘 얘기하고 싶은 것은 vue.js 2.2 버전부터 추가된 provide/inject기능이다. 기본적으로는 Props처럼 부모에서 자식 컴포넌트로의 데이터 전달을 위한 기능이다. 사용법은 아래와 같다.

provide/inject example

부모 컴포넌트는 14–16번 라인처럼 provide를 설정할 수 있다. 객체 혹은 객체를 반환하는 함수로 설정가능하며 이 객체 안에 제공(provide)하고자 하는 속성들을 기입하면 된다.

자식컴포넌트는 7번 줄처럼 주입(inject)받고자 하는 속성 이름들을 배열 형태로 기입하면 로컬 변수로 사용할 수 있다.

기본적으로 provide/inject반응형을 지원하지 않는다(not reactive). 하지만 반응형을 구현할 수 있는 방법이 있다. 부모가 속성을 제공(provide)할 때 감시중인(observed) 객체를 전달하면 된다.

provide/inject reactive example

위 예제처럼 사용하면 반응형을 구현할 수 있다.

추가적으로 자식 컴포넌트에서 inject를 구현할 때 props나 data의 속성을 기본값으로 사용할 수 있다.

중요한 질문은 provide/inject 를 왜 사용하느냐일텐데, props와의 차이점을 알면 이해할 수 있을것이다.

  • 직계 부모보다 더 상위의 부모로부터도 데이터를 주입을 받을 수 있다.
  • 따라서 템플릿에 속성으로 데이터 전달을 명시하는 props와는 달리 provide/inject는 데이터 흐름을 직관적으로 알 수 없고, devtools 에서도 확인할 수 없다.
Image for post
Image for post

이 점때문인지 Vue.js 공식 가이드 문서에서는 아래와 같이 언급하고 있다.

provideinject는 주로 고급 플러그인/컴포넌트 라이브러리를 위해 제공됩니다. 일반 애플리케이션 코드에서는 사용하지 않는 것이 좋습니다.

나의 경우에는 UI라이브러리의 컴포넌트를 설계할 때 props로(혹은 문서에) 드러내고 싶지 않은 특수한 케이스의 데이터 흐름을 정의할때 사용한 바 있다.

관련글

이 글이 마음에 드셨다면 👏🏽👏🏽, 커피한잔 후원하기 (카카오페이), 이메일 구독

Witinweb

웹을 이해하고 웹에 wit를 불어넣는 놀이터

Jeong Woo Ahn

Written by

Vue.js 관련 이야기들 | 그림그리는 프로그래머 | working at habitfactory.co | 커피한잔 후원하기 https://bit.ly/355PDlu | 이메일 구독하기 http://bit.ly/3ax32Fn

Witinweb

Witinweb

웹을 이해하고 웹에 wit를 불어넣는 놀이터

Jeong Woo Ahn

Written by

Vue.js 관련 이야기들 | 그림그리는 프로그래머 | working at habitfactory.co | 커피한잔 후원하기 https://bit.ly/355PDlu | 이메일 구독하기 http://bit.ly/3ax32Fn

Witinweb

Witinweb

웹을 이해하고 웹에 wit를 불어넣는 놀이터

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store