You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The `key` special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify vnodes when diffing the new list of nodes against the old list.
5
+
특수 속성 `key`는 Vue의 가상 DOM 알고리즘이 이전 목록과 새 노드 목록을 비교할 때 vnode를 식별하는 힌트로 주로 사용됩니다.
10
6
11
7
-**요구되는 값**: `number | string | symbol`
12
8
13
9
-**세부 사항**:
14
10
15
-
Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed / destroyed.
11
+
키가 없으면 Vue는 엘리먼트 이동을 최소화하고 동일한 유형의 엘리먼트를 가능한 한 제자리에서 패치/재사용하는 알고리즘을 사용합니다.
12
+
키를 사용하면 키의 순서 변경에 따라 엘리먼트를 재정렬하고 더 이상 존재하지 않는 키가 있는 엘리먼트는 항상 제거/파기됩니다.
16
13
17
-
Children of the same common parent must have **unique keys**. Duplicate keys will cause render errors.
14
+
동일한 공통 부모의 자식들은 **고유 키**가 있어야 합니다.
15
+
키가 중복되면 렌더링 오류가 발생합니다.
18
16
19
-
The most common use case is combined with `v-for`:
17
+
`v-for`에서 가장 일반적으로 사용 됩니다:
20
18
21
19
```vue-html
22
20
<ul>
23
21
<li v-for="item in items" :key="item.id">...</li>
24
22
</ul>
25
23
```
26
24
27
-
It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:
25
+
또는 엘리먼트/컴포넌트를 재사용하는 대신 강제로 교체하는 데 사용할 수도 있습니다.
26
+
다음과 같은 경우에 유용할 수 있습니다:
28
27
29
-
-Properly trigger lifecycle hooks of a component
30
-
-Trigger transitions
28
+
-컴포넌트의 수명 주기 훅을 올바르게 트리거함.
29
+
-트렌지션 트리거
31
30
32
-
For example:
31
+
예제:
33
32
34
33
```vue-html
35
34
<transition>
36
35
<span :key="text">{{ text }}</span>
37
36
</transition>
38
37
```
39
38
40
-
When `text` changes, the `<span>` will always be replaced instead of patched, so a transition will be triggered.
39
+
`text`가 변경되면 `<span>`이 패치 대신 항상 교체되므로 트렌지션이 트리거됩니다.
41
40
42
-
-**참고**: [가이드 - List Rendering - Maintaining State with `key`](/guide/essentials/list.html#maintaining-state-with-key)
41
+
-**참고**: [가이드 - 리스트 렌더링: `key`를 통한 상태유지](/guide/essentials/list.html#maintaining-state-with-key)
43
42
44
43
## ref
45
44
46
-
Denotes a [template ref](/guide/essentials/template-refs.html).
@@ -53,12 +52,16 @@ Denotes a [template ref](/guide/essentials/template-refs.html).
53
52
54
53
In Options API, the reference will be registered under the component's `this.$refs` object:
55
54
55
+
`ref`는 엘리먼트 또는 자식 컴포넌트를 참조하기 위해 사용됩니다.
56
+
57
+
옵션 API에서 참조는 컴포넌트의 `this.$refs` 객체 내에 등록됩니다.
58
+
56
59
```vue-html
57
-
<!-- stored as this.$refs.p -->
58
-
<p ref="p">hello</p>
60
+
<!-- 저장됨: this.$refs.p -->
61
+
<p ref="p">안녕!</p>
59
62
```
60
63
61
-
In Composition API, the reference will be stored in a ref with matching name:
64
+
컴포지션 API에서 참조는 이름이 일치하는 `ref`에 저장됩니다.
62
65
63
66
```vue
64
67
<script setup>
@@ -68,35 +71,41 @@ Denotes a [template ref](/guide/essentials/template-refs.html).
68
71
</script>
69
72
70
73
<template>
71
-
<p ref="p">hello</p>
74
+
<p ref="p">안녕!</p>
72
75
</template>
73
76
```
74
77
75
-
If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be the child component instance.
78
+
일반 DOM 엘리먼트에서 사용되는 경우, 참조는 해당 엘리먼트가 됩니다.
79
+
자식 컴포넌트에 사용되는 경우, 참조는 자식 컴포넌트 인스턴스가 됩니다.
76
80
77
-
Alternatively `ref` can accept a function value which provides full control over where to store the reference:
81
+
`ref`는 함수를 사용하여 참조 저장을 완전히 제어할 수 있습니다:
78
82
79
83
```vue-html
80
84
<ChildComponent :ref="(el) => child = el" />
81
85
```
82
86
83
-
An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you must wait until the component is mounted before accessing them.
87
+
참조 등록 타이밍에 대한 중요한 참고 사항:
88
+
참조는 렌더 함수의 결과로 생성되므로,
89
+
접근하기 전에 컴포넌트가 마운트될 때까지 기다려야 합니다.
84
90
85
-
`this.$refs` is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
91
+
`this.$refs`도 반응형이 아니므로 데이터 바인딩을 위한 템플릿에서 사용하면 안됩니다.
When the `is` attribute is used on a native HTML element, it will be interpreted as a [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), which is a native web platform feature.
103
+
`is` 속성이 네이티브 HTML 엘리먼트에 사용되면,
104
+
네이티브 웹 플랫폼 함수인 [커스터마이즈 빌트인 엘리먼트](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)로 해석됩니다.
98
105
99
-
There is, however, a use case where you may need Vue to replace a native element with a Vue component, as explained in [DOM Template Parsing Caveats](/guide/essentials/component-basics.html#dom-template-parsing-caveats). You can prefix the value of the `is` attribute with `vue:` so that Vue will render the element as a Vue component instead:
106
+
그러나 [DOM 템플릿 파싱 주의 사항](/guide/essentials/component-basics.html#dom-template-parsing-caveats)에 설명된 대로,
107
+
기본 엘리먼트를 Vue 컴포넌트로 교체하기 위해 Vue가 필요할 수 있는 사용 사례가 있습니다.
0 commit comments