종속 (의존성 주입)

개요

prop드릴링

provide/inject

• prop드릴링을 해결하기 위한 수단
• 상위 컴포넌트에서 의존성을 주입하여 하위 트리 모든 컴포넌트는 깊이에 상관없이 값을 전달받는다.

provide()

설명

🔖 컴포넌트 하위 항목에 데이터를 제공하는 함수

Type

function provide<T>(key: InjectionKey<T> | string, value: T): void

세부사항

🔖 인자 : "키가 될 문자열 또는 심볼(symbol)"과 "제공될 값(객체, 함수 등등)” provide를 통해 전달된 데이터가 주입된 컴포넌트에 의해 변경될 수 없도록 하려면, 제공된 값을 readonly로 래핑 가능

예제

inject()

설명

🔖 부모 컴포넌트에서 제공하는 데이터를 주입하는 함수

Type

// 기본 값 없음
function inject<T>(key: InjectionKey<T> | string): T | undefined

// 기본 값 정의 있음
function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T

// 팩토리 함수
function inject<T>(
  key: InjectionKey<T> | string,
  defaultValue: () => T,
  treatDefaultAsFactory: true
): T

세부사항

🔖 인자 : "키가 될 문자열 또는 심볼(symbol)"과 "제공될 값(객체, 함수 등등)”

예제

import { inject } from 'vue'
import { countSymbol } from './injectionSymbols'

// 주입: 기본 값이 없는 정적 값
const path = inject('path')

// 주입: 반응형 값
const count = inject('count')

// 주입: 심볼 키를 사용하여
const count2 = inject(countSymbol)

// 주입: 기본 값 제공을 하며 (제공되는 '값'이 없는 경우 적용됨)
const bar = inject('path', '/default-path')

// 함수 기본값을 사용하여 주입하기
const fn = inject('function', () => {})

// 팩토리 함수를 사용하여 주입하기
const baz = inject('factory', () => new ExpensiveObject(), true)

요약

함수	설명
provide	부모 컴포넌트에서 자식 컴포넌트로 값이나 함수를 제공해주는 함수
inject	자식 컴포넌트에서 부모 컴포넌트의 값이나 함수를 사용할 수 있게 주입받는 함수