번역: tutorial/step-12

Author: niceplugin

ko-KR/src/tutorial/src/step-12/App/composition.js

@@ -6,7 +6,7 @@ export default {
     ChildComp
   },
   setup() {
-    const greeting = ref('Hello from parent')
+    const greeting = ref('부모 컴포넌트로부터 💌을 전달받았어요!')
 
     return {
       greeting

ko-KR/src/tutorial/src/step-12/App/options.js

@@ -6,7 +6,7 @@ export default {
   },
   data() {
     return {
-      greeting: 'Hello from parent'
+      greeting: '부모 컴포넌트로부터 💌을 전달받았어요!'
     }
   }
 }

ko-KR/src/tutorial/src/step-12/ChildComp/template.html

@@ -1 +1 @@
-<h2>{{ msg || 'No props passed yet' }}</h2>
+<h2>{{ msg || 'prop이 아직 전달되지 않았습니다!' }}</h2>

ko-KR/src/tutorial/src/step-12/description.md

@@ -1,6 +1,7 @@
 # Props
 
-A child component can accept input from the parent via **props**. First, it needs to declare the props it accepts:
+자식 컴포넌트는 **props**를 통해 부모로부터 데이터를 받을 수 있습니다.
+우선, 허용할 props를 선언해야 합니다:
 
 <div class="composition-api">
 <div class="sfc">
@@ -14,25 +15,29 @@ const props = defineProps({
 </script>
 ```
 
-Note `defineProps()` is a compile-time macro and doesn't need to be imported. Once declared, the `msg` prop can be used in the child component's template. It can also be accessed in JavaScript via the returned object of `defineProps()`.
+참고로 `defineProps()`는 컴파일 타임 매크로이므로 `import` 할 필요가 없습니다.
+일단 선언되면 `msg` prop은 자식 컴포넌트 템플릿에서 사용할 수 있습니다.
+또한 `defineProps()`에서 반환된 객체는 JavaScript에서 접근할 수 있습니다.
 
 </div>
 
 <div class="html">
 
 ```js
-// in child component
+// 자식 컴포넌트에서
 export default {
   props: {
     msg: String
   },
   setup(props) {
-    // access props.msg
+    // props.msg에 접근 가능
   }
 }
 ```
 
-Once declared, the `msg` prop is exposed on `this` and can be used in the child component's template. The received props are passed to `setup()` as the first argument.
+일단 선언되면 `msg` prop이 `this`에 노출되고,
+자식 컴포넌트의 템플릿에서 사용할 수 있습니다.
+전달 받은 props는 `setup()`에 첫 번째 인자로 전달됩니다.
 
 </div>
 
@@ -41,19 +46,21 @@ Once declared, the `msg` prop is exposed on `this` and can be used in the child
 <div class="options-api">
 
 ```js
-// in child component
+// 자식 컴포넌트에서
 export default {
   props: {
     msg: String
   }
 }
 ```
 
-Once declared, the `msg` prop is exposed on `this` and can be used in the child component's template.
+일단 선언되면 `msg` prop이 `this`에 노출되고,
+자식 컴포넌트의 템플릿에서 사용할 수 있습니다.
 
 </div>
 
-The parent can pass the prop to the child just like attributes. To pass a dynamic value, we can also use the `v-bind` syntax:
+부모는 속성을 사용하는 것처럼 자식에게 prop을 전달할 수 있습니다.
+동적 값을 전달하기 위해 `v-bind` 문법을 사용할 수도 있습니다:
 
 <div class="sfc">
 
@@ -70,4 +77,4 @@ The parent can pass the prop to the child just like attributes. To pass a dynami
 
 </div>
 
-Now try it yourself in the editor.
+이제 `greeting` 속성을 자식 컴포넌트에 `msg`라는 prop으로 전달해봅시다!