Vue provide inject 간편하게 데이터 전달하기

provide, inject를 사용하는 이유

Vue에서 데이터 전달을 위해서 props를 많이 사용합니다.

하지만 props를 사용할 때, 자식 컴포넌트의 계층이 깊다면 여러 컴포넌트를 거쳐서 데이터가 전달되게 됩니다.

데이터가 필요가 없는 컴포넌트인데도 props를 통해서 전달해야 하고, 번거로움이 있습니다.

 

provide, inject를 사용하게 되면 부모 컴포넌트에서 데이터를 제공하게 되고 모든 하위 컴포넌트에서 inject를 통해서 데이터를 받을 수 있습니다.

 

 

지금부터 사용방법에 대해서 알아보겠습니다.

provide inject 사용하기

// 부모 컴포넌트
export default {
 provide() {
    return {
      value: this.value
    };
  },
}

부모 컴포넌트에서 provide 속성에서 data를 넣어 줍니다.

// 자식 컴포넌트
export default {
  inject: ['data'],
  created() {
    console.log(this.data); // superman
  },
}

데이터를 사용할 컴포넌트에서 inject를 선언해서 사용합니다.

부모 컴포넌트 하위에 있는 컴포넌트에서는 inject를 이용해서 data를 받아 올 수 있습니다.

 

provide 반응성 지원

일반적으로 provide의 경우에 반응성을 지원하지 않습니다.  변경된 데이터를 자식 정보에 전달할 수 없지만,

computed를 이용해서 반응성을 지원할 수 있습니다.

// 부모 컴포넌트
export default {
  provide() {
    return {
      value: computed(() => this.value) 
    }
  },
}

 

provide inject로 부모 이벤트 호출하기

부모에서 자식 데이터 전달 하듯이, 자식에서 부모로 데이터 전달도 가능합니다

$emit과 비슷한 방식입니다.

provide를 통해서 정의된 함수를 전달하고 inject를 통해서 호출하는 방법입니다.

// 부모 컴포넌트
export default {
 provide() {
    return {
      setValue: this.setValue,
    };
  },
  methods: {
     setValue(val) {
        tis.value = val
     }
  }
}

// 자식 컴포넌트
export default {
  inject: ['value', 'setValue'],
  template: `<div>
    <div>{{ value }}</div>
    <button @click="clickHandler">child</button>
  </div>`,
  methods: {
    clickHandler() {
      this.setValue('pororo');
    }
  }
}

 

provide, inject 주의사항

provide, inject를 사용하게되면 컴포넌트 간의 의존성이 생기게 됩니다.

사용하기 전에 충분히 고민해보시고 사용하시길 바랍니다.

 

vue 공식문서에서는 아래와 같이 일반 어플리케이션 코드에서는 사용하지 않는 것이 좋다고 합니다.

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

이유는 대규모 어플리케이션 provide, inject를 무분별하게 사용하게 되면

데이터가 어디에서 전달되는지 구분할 수 없게 되어서 문제가 있을 수 있습니다.

 

대규모 어플리케이션에서 상태 관리에 필요한 데이터의 경우에는 vuex를 이용하면 좀 더 효율적으로 데이터를 관리할 수 있습니다.

 

결론적으로 provide, inject를 사용하면 데이터 전달을 할 때 유용하지만 컴포넌트가 의존성 증가, 데이터 복잡성 증가라는 단점도 있습니다.

 

해당 장점과 단점을 잘 생각해 보시고 사용하시면 됩니다.