컴포넌트 심화 학습 (Provide/Inject, Template refs)

Provide/Inject

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 하는 경우 props를 사용하면 된다. 그런데 만약에 컴포넌트 계층 구조가 복잡하게 얽혀있어서 부모 컴포넌트로부터 자식 컴포넌트, 그리고 그 자식 컴포넌트의 자식 컴포넌트로 데이터를 전달하는 경우가 발생하면 props를 통해 데이터를 전달하는 것은 굉장히 복잡한 코드를 양산하게 된다.

 

이러한 경우에 사용할 수 있는것이 Provide/Inject이다. 컴포넌트의 계층 구조가 아무리 복잡하더라도 부모 컴포넌트에서는 provide 옵션을, 자식 컴포넌트에서는 inject 옵션을 통해 데이터를 쉽게 전달할 수 있다.

 

컴포넌트 구조가 다음과 같다고 가정을 한다.

Root
∟ ParentComponent
    ⊢ ChildComponent1
    ∟ ChildComponent2
        ⊢ ChildChildComponent1
        ∟ ChildChildComponent2

 - ParentComponent 컴포넌트에서 ChildChildComponent2 데이터를 전달하려고 한다.

 - Props를 사용해서 데이터를 전달하려면 ParentComponent → ChildComponent2 → ChildChildComponent2 이렇게 3단계를 거쳐서 전달해야 한다.

 - 하지만 Provide/Inject를 사용하면 한 번에 바로 전달할 수 있다.

// src/views/ProvideInject.vue
<template>
  <ProvideInjectChild />
</template>
<script>
  import ProviceInjectChild from './ProvideInjectChild'
  
  export default {
    components: { ProvideInjectChild },
    data() {
      return {
        items: ['A', 'B']
      }
    },
    provide() {
      return {
        itemLength: this.items.length
      }
    },
  }
</script>

 - Provide 함수를 통해서 배열 items의 length를 반환한다. (자식 컴포넌트로 전달하고자 하는 데이터를 Provide에 정의)

// src/views/ProvideInjectChild
export default {
  inject: ['itemLength'],
  mounted() {
    console.log(this.itemLength)
  }
}

 - 부모 컴포넌트로부터 전달받고자 하는 데이터와 동일한 속성 이름으로 injectㅇ 문자열 배열로 정의한다.

 - 이렇게 Provide/Inject를 이용하면 아무리 컴포넌트 계층 구조가 복잡하더라도 원하는 자식 컴포넌트로 데이터를 한 번에 전달할 수 있다.

 - 하지만, inject를 통해서 데이터를 전달받는 자식 컴포넌트에서는 전달받는 데이터가 어떤 부모 컴포넌트에서 전달되었는지 확인이 안된다는 단점이 있다.

 

Template refs

 - Vue 개발 시 특별한 경우가 아니면 HTML 객체에 바로 접근해서 코드를 구현해야 할 일은 없다.

 - 하지만 어쩔 수 없이 자바스크립트에서 HTML 객체에 바로 접근해야 한다면 HTML 태그에 id 대신 ref를 사용하면 된다.

<input type="text" ref="title">

 - this.$refs를 이용해서 ref 속성에 지정된 이름으로 HTML 객체에 접근이 가능해진다.

this.$refs.title.focus()