Frontend Academy · 강의

의존성 주입을 위한 provide()와 inject()

상위 컴포넌트에서 값을 제공하고 트리 깊은 곳에서 주입하여, 전체 상태 관리 라이브러리 없이도 prop을 여러 단계로 전달하는 일을 피합니다.

의존성 주입을 위한 provide()와 inject()은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

속성 전달 문제

데이터가 상위 컴포넌트에 있고 깊은 하위 컴포넌트까지 전달해야 하는 경우가 있습니다. 모든 중간 컴포넌트를 거쳐 데이터를 전달하는 방식(속성 전달)은 번거롭고 쉽게 문제가 생깁니다.

provide() — 값 선언

상위 컴포넌트가 setup()에서 provide(key, value)를 호출합니다. 그러면 해당 값을 모든 하위 컴포넌트에서 사용할 수 있습니다.

<!-- ParentComponent.vue -->
<script setup>
import { provide, ref } from 'vue';

const theme = ref('dark');
provide('theme', theme);
</script>

inject() — 값 사용

모든 하위 컴포넌트에서 inject(key)를 호출하여 값을 읽을 수 있습니다.

<!-- DeepChild.vue -->
<script setup>
import { inject } from 'vue';

const theme = inject('theme');
</script>

<template>
  <div :class="theme">Theme is: {{ theme }}</div>
</template>

ref/reactive를 사용한 반응성

ref 또는 reactive 객체를 제공하면 하위 컴포넌트가 반응형 값을 받으며, 변경 사항이 자동으로 전파됩니다.

// Parent
const user = reactive({ name: 'Alice', role: 'admin' });
provide('user', user);

// Anywhere descendant
const user = inject('user');
user.role; // 'admin' — reactive

충돌을 피하기 위한 Symbol 키

대규모 앱에서는 문자열 키가 충돌할 위험이 있습니다. Symbol은 고유성을 보장하므로 공유 파일에 정의하십시오.

// keys.ts
export const ThemeKey = Symbol('theme');
export const UserKey  = Symbol('user');

// Parent
provide(ThemeKey, ref('dark'));
// Child
const theme = inject(ThemeKey);

TypeScript 지원

InjectionKey<T>를 사용하면 양쪽의 타입을 안전하게 지정할 수 있습니다.

import type { InjectionKey, Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

// Provider:
provide(ThemeKey, ref('dark'));

// Consumer (type-checked):
const theme = inject(ThemeKey); // Ref<string> | undefined

기본값

어떤 상위 컴포넌트도 키를 제공하지 않으면 기본값을 전달하지 않는 한 inject는 undefined를 반환합니다.

const theme = inject('theme', 'light'); // default if missing
const lazy  = inject('user', () => createDefaultUser(), true); // factory

읽기 전용 제공 값

하위 컴포넌트가 공유 상태를 변경하지 못하게 하려면 readonly()로 감싸십시오.

import { readonly } from 'vue';

const user = reactive({ name: 'Alice' });
provide('user', readonly(user));
// Children can read but cannot mutate

앱 수준의 Provide

애플리케이션 수준에서 값을 제공하면 어디서나 사용할 수 있습니다. 플러그인에 유용한 방식입니다.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.provide('apiClient', new ApiClient());
app.mount('#app');

컴포저블 래퍼

더 깔끔한 사용자 API를 만들려면 provide/inject를 컴포저블로 감싸십시오.

// useTheme.ts
import { inject, type InjectionKey, type Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

export function useTheme() {
  const theme = inject(ThemeKey);
  if (!theme) throw new Error('useTheme: no provider in tree');
  return theme;
}

provide/inject와 Pinia 비교

provide/inject는 가볍고 라이브러리가 필요하지 않으며 플러그인 스타일의 값(theme, 지역 설정, 현재 사용자)에 적합합니다. Pinia는 DevTools를 지원하는 완전한 상태 관리 방식으로, 복잡한 변경이 있는 앱 전체의 반응형 상태에 적합합니다.

빠른 확인

대규모 Vue 앱에서 provide/inject를 사용할 때 키 충돌을 피하는 권장 방법은 무엇인가요?

복습: provide/inject

상위 컴포넌트가 제공하고 하위 컴포넌트가 주입하므로 속성 전달이 필요하지 않습니다. 반응형 값(ref/reactive)은 반응형으로 전파됩니다. Symbol 키와 InjectionKey를 사용하면 타입이 안전하고 충돌 없는 주입을 구현할 수 있습니다. inject의 두 번째 인수로 기본값을 전달할 수 있습니다. 변경을 막으려면 readonly()를 사용합니다. 여러 앱에서 사용하는 플러그인에는 앱 수준의 provide를 사용합니다. 플러그인 스타일의 값에는 Pinia를 대신할 수 있는 가벼운 방식입니다.

자주 묻는 질문

“의존성 주입을 위한 provide()와 inject()” 강의는 무료인가요?

네 — “의존성 주입을 위한 provide()와 inject()” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“의존성 주입을 위한 provide()와 inject()”에서 뭘 배우나요?

상위 컴포넌트에서 값을 제공하고 트리 깊은 곳에서 주입하여, 전체 상태 관리 라이브러리 없이도 prop을 여러 단계로 전달하는 일을 피합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“의존성 주입을 위한 provide()와 inject()” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기