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

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의 속성을 기본값으로 사용할 수 있다.

props와 차이점

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

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

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

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

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

관련글

잘못된 정보나 좋은 의견이 있다면 언제든지 댓글 부탁드립니다. 박수는 글쓴이를 춤추게 합니다. 👏👏

글이 좋았다면 Buy me a coffee! ☕