Merge pull request #258 from niceplugin/api/options-composition

문서 번역본 보완: api/options-composition.md

Author: narusas

ko-KR/src/api/composition-api-dependency-injection.md

@@ -44,7 +44,7 @@
 
 ## inject()
 
-상위 컴포넌트 또는 `app.provide()`를 통해 앱에서 제공(Provide)한 값을 주입(Inject)합니다.
+상위 컴포넌트 또는 [`app.provide()`](/api/application.html#app-provide)를 통해 앱에서 제공(Provide)된 값을 주입(Inject)합니다.
 
 - **타입**:
 
@@ -55,7 +55,7 @@
   // 기본 값 정의 있음
   function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T
 
-  // with factory
+  // 팩토리 함수
   function inject<T>(
     key: InjectionKey<T> | string,
     defaultValue: () => T,

ko-KR/src/api/options-composition.md

@@ -1,8 +1,8 @@
-# Options: Composition
+# 옵션: 컴포지션 {#options-composition}
 
 ## provide
 
-하위 컴포넌트에 주입할 수 있는 값을 제공합니다.
+하위 컴포넌트에 주입(Inject)할 수 있도록 값을 제공(Provide)합니다.
 
 - **타입**:
 
@@ -14,9 +14,13 @@
 
 - **세부 사항**:
 
-  `provide` 와 [`inject`](#inject) 는 동일한 상위 체인에 있는 컴포넌트 계층 구조의 깊이에 관계없이 모든 하위 컴포넌트에 대한 의존성 주입기 역할을 할 수 있도록 사용됩니다.
+  부모 컴포넌트가 값을 제공하면,
+  컴포넌트 계층 구조의 깊이와 관계없이 모든 자식 컴포넌트에서 선택적으로 종속성을 주입받을 수 있도록,
+  `provide`와 [`inject`](#inject)는 함께 사용됩니다.
 
-  `provide` 옵션은 객체 또는 객체를 반환하는 함수여야 합니다. 이 객체에는 하위 컴포넌트에 주입할 수 있는 속성이 포함되어 있습니다. 이 객체에는 Symbol을 키값으로 사용할 수 있습니다.
+  `provide` 옵션은 객체이거나 객체를 반환하는 함수여야 합니다.
+  이 객체는 자식 컴포넌트에 주입할 수 있는 속성으로 구성되며,
+  심볼(Symbol)을 키로 사용할 수 있습니다.
 
 - **예제**:
 
@@ -33,7 +37,7 @@
   }
   ```
 
-  함수를 사용하여 컴포넌트별 상태 제공:
+  함수 사용법:
 
   ```js
   export default {
@@ -50,13 +54,15 @@
   }
   ```
 
-  위 예시에서 제공된 `msg` 반응형(reactive)이 아닙니다. 자세한 내용은 [Working with Reactivity](/guide/components/provide-inject.html#working-with-reactivity)을 참조하십시오.
+  위 예제에서 제공된 `msg`는 반응형이 아닙니다.
+  자세한 내용은 [반응형으로 만들기](/guide/components/provide-inject.html#working-with-reactivity)를 참고하십시오.
 
 - **참고**: [Provide / Inject](/guide/components/provide-inject.html)
 
 ## inject
 
-조상 제공자(Provider)로부터 속성을 찾아 현재 컴포넌트에 주입할 속성을 선언합니다.
+상위 컴포넌트 또는 [`app.provide()`](/api/application.html#app-provide)를 통해 앱에서 제공(Provide)된 값 중,
+주입(Inject)할 속성을 선언합니다.
 
 - **타입**:
 
@@ -77,18 +83,24 @@
 
 - **세부 사항**:
 
-  `inject` 옵션은 다음 중 하나여야 합니다:
+  `inject` 옵션은 다음 중 하나입니다:
 
-    - 문자열 배열 또는
-    - 객체의 키가 로컬 바인딩 이름이고 값이 다음 중 하나여야 합니다:
-        - 사용 가능한 주입에서 검색할 키(문자열 또는 심볼) 또는
-        - 객체:
-            - `from` 속성은 사용 가능한 주입에서 검색할 키(문자열 또는 심볼)이며,
-            - `default` 속성은 대체 값으로 사용됩니다. props 기본값과 유사하게 여러 컴포넌트 인스턴스 간의 값 공유를 피하기 위해 객체 유형에 팩토리 함수가 필요합니다.
+  - 문자열로 이루어진 배열
+  - 객체의 키는 인스턴스에 바인딩 될 이름이고, 값은 다음 중 하나입니다:
+    - 문자열 또는 심볼로 되어있는 주입 가능한 속성의 키.
+    - 다음 속성 중 하나 이상으로 이루어진 객체:
+      - `from`: 문자열 또는 심볼로 되어있는 주입 가능한 속성의 키.
+      - `default`: 대체 값으로 사용되며, props의 `default`와 유사.
+        대체될 값이 객체 타입일 경우,
+        컴포넌트의 여러 인스턴스 간 값의 참조가 공유되는 것을 피하기 위해 팩토리 함수를 사용해야 함.
 
-  일치하는 속성이나 기본값이 제공되지 않은 경우 주입된 속성은 `undefined`가 됩니다.
+  일치하는 속성이나 기본값이 제공되지 않는 경우, 주입된 속성의 값은 `undefined`입니다.
 
-  주입된 바인딩은 반응형(reactive)이 아닙니다. 이것은 의도적입니다. 그러나 주입된 값이 반응형 객체인 경우 해당 객체의 속성은 반응형으로 유지됩니다. 자세한 내용은 [Working with Reactivity](/guide/components/provide-inject.html#working-with-reactivity)을 참조하세요.
+  주입되어 바인딩된 값은 반응형이 아니며,
+  이것은 의도적입니다.
+  그러나 주입된 값이 반응형 객체인 경우,
+  해당 객체의 속성은 반응형으로 유지됩니다.
+  자세한 내용은 [반응형으로 만들기](/guide/components/provide-inject.html#working-with-reactivity)를 참고하십시오.
 
 - **예제**:
 
@@ -103,10 +115,10 @@
   }
   ```
 
-  prop의 기본값으로 주입된 값 사용하기:
+  주입된 값을 prop의 기본값으로 사용:
 
   ```js
-  const Child = {
+  export default {
     inject: ['foo'],
     props: {
       bar: {
@@ -118,10 +130,10 @@
   }
   ```
 
-  주입된 값을 데이터 입력으로 사용:
+  주입된 값을 데이터 입력값으로 사용:
 
   ```js
-  const Child = {
+  export default {
     inject: ['foo'],
     data() {
       return {
@@ -130,21 +142,22 @@
     }
   }
   ```
-  
-  주입은 기본값 설정 옵션을 제공합니다:
+
+  주입될 값에 기본값을 설정한 옵션을 제공:
 
   ```js
-  const Child = {
+  export default {
     inject: {
       foo: { default: 'foo' }
     }
   }
   ```
 
-  다른 이름의 속성에서 주입해야 하는 경우 `from`을 사용하여 소스 속성을 나타냅니다:
+  주입할 속성의 이름을 다르게 해야 할 경우,
+  `from`을 사용하여 주입할 속성 표기:
 
   ```js
-  const Child = {
+  export default {
     inject: {
       foo: {
         from: 'bar',
@@ -154,10 +167,10 @@
   }
   ```
 
-  prop 기본값과 유사하게 레퍼런스 값에 대해 팩토리 함수를 사용해야 합니다:
+  팩토리 함수를 사용한 객체 타입의 기본값 지정:
 
   ```js
-  const Child = {
+  export default {
     inject: {
       foo: {
         from: 'bar',
@@ -183,12 +196,18 @@
 
 - **세부 사항**:
 
-  `mixins` 옵션은 mixin 객체의 배열을 허용합니다. 이러한 믹스인 객체는 일반 인스턴스 객체와 같은 인스턴스 옵션을 포함할 수 있으며 특정 옵션 병합 논리를 사용하여 최종 옵션에 대해 병합됩니다. 예를 들어 믹스인에 `created` 훅이 있고 컴포넌트 자체에도 훅이 있는 경우 두 함수가 모두 호출됩니다.
+  `mixins` 옵션은 믹스인 객체로 이루어진 배열입니다.
+  믹스인 객체는 일반 인스턴스 객체와 같은 옵션을 포함할 수 있으며,
+  특정 옵션 병합 로직을 사용하여 병합된 최종 옵션이 인스턴스에서 사용됩니다.
+  예를 들어 믹스인에 `created` 훅이 있고, 컴포넌트에도 훅이 있으면,
+  두 함수가 모두 호출됩니다.
 
-  믹스인 훅은 제공된 순서대로 호출되며 컴포넌트 자체 훅보다 먼저 호출됩니다.
+  믹스인 훅은 제공된 순서대로 호출되며, 컴포넌트 자체 훅보다 먼저 호출됩니다.
 
-  :::warning 더 이상 권장되지 않습니다.
-  Vue2 에서, 믹스인은 컴포넌트 로직의 재사용 가능한 청크를 생성하기 위한 기본 메커니즘이었습니다. 믹스인은 Vue3 에서 계속 지원되지만, [Composition API](/guide/reusability/composables.html) 를 활용하여 컴포넌트 코드 재사용하는 방식이 선호되고 권장하고 있습니다.
+  :::warning 더 이상 권장되지 않음
+  Vue 2에서 믹스인은 컴포넌트 로직의 재사용 가능한 청크를 생성하기 위한 기본 메커니즘이었습니다.
+  Vue 3에서 믹스인은 계속 지원되지만,
+  컴포넌트 간 코드 재사용을 위한 접근 방식으로 [컴포지션 API](/guide/reusability/composables.html)가 추천됩니다.
   :::
 
 - **예제**:
@@ -200,20 +219,22 @@
     }
   }
 
-  createApp({
-    created() {
-      console.log(2)
-    },
-    mixins: [mixin]
-  })
+  export default {
+    createApp({
+      created() {
+        console.log(2)
+      },
+      mixins: [mixin]
+    })
+  }
 
   // => 1
   // => 2
   ```
 
 ## extends
 
-확장할 "기본 클래스" 컴포넌트 입니다.
+현재 컴포넌트를 확장(extend)할 "클래스 기반" 컴포넌트입니다.
 
 - **타입**:
 
@@ -225,20 +246,33 @@
 
 - **세부 사항**:
 
-  한 컴포넌트가 다른 컴포넌트를 확장하여 해당 컴포넌트 옵션을 상속할 수 있습니다.
+  B 컴포넌트 확장에 A 컴포넌트를 사용하면, A 컴포넌트의 옵션을 상속받을 수 있습니다.
+
+  From an implementation perspective, `extends` is almost identical to `mixins`. The component specified by `extends` will be treated as though it were the first mixin.
+
+  However, `extends` and `mixins` express different intents. The `mixins` option is primarily used to compose chunks of functionality, whereas `extends` is primarily concerned with inheritance.
 
-  구현의 관점에서 `extens`는 `mixins`와 거의 동일합니다. `extends`로 지정된 컴포넌트는 첫 번째 믹스인인 것처럼 처리됩니다.
+  As with `mixins`, any options will be merged using the relevant merge strategy.
 
-  그러나, `extends`와 `mixins`는 다른 의도를 표현합니다. `mixins` 옵션은 주로 기능 덩어리를 구성하는 데 사용되는 반면, `extends`는 주로 상속과 관련이 있습니다.
+  구현의 관점에서 `extens`는 `mixins`와 거의 동일합니다.
+  `extens`로 지정된 컴포넌트는 첫 번째 믹스인인 것처럼 처리됩니다.
 
-  `mixins`와 마찬가지로 모든 옵션은 관련 병합 전략을 사용하여 병합됩니다.
+  그러나 `extens`와 `mixins`는 구현된 목적이 다릅니다.
+  주로 `mixins` 옵션은 기능 묶음을 구성하는데 사용되지만,
+  `extens`는 상속과 관련됩니다.
+
+  `mixins`와 마찬가지로 `extends`의 모든 옵션은 관련 병합 로직을 사용하여 병합됩니다.
 
 - **예제**:
 
   ```js
-  const CompA = { ... }
+  // CompB.vue 파일에서
+
+  import CompA from './CompA.vue'
 
-  const CompB = {
+  export default {
+    // CompB 컴포넌트는 CompA에 정의된,
+    // 옵션 속성들을 상속받음
     extends: CompA,
     ...
   }