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
What you see in the editor is a Vue Single File Component (SFC). An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a `.vue` file.
5
+
편집기에 보이는 것은 Vue SFC(Single File Component)입니다.
6
+
SFC는 HTML, CSS, JavaScript를 캡슐화한 코드 블록으로 재사용 가능한 `.vue` 파일입니다.
6
7
7
8
</div>
8
9
9
-
The core feature of Vue is **declarative rendering**: using a template syntax that extends HTML, we can describe how the HTML should look like based on JavaScript state. When the state changes, the HTML updates automatically.
10
+
Vue의 핵심 기능은 **선언적 렌더링**입니다.
11
+
HTML을 확장하는 템플릿 문법을 사용하여 JavaScript 상태를 기반으로 HTML이 어떻게 보이는지 설명할 수 있습니다.
12
+
상태가 변경되면 HTML이 자동으로 업데이트됩니다.
10
13
11
14
<divclass="composition-api">
12
15
13
-
State that can trigger updates when changed are considered **reactive**. We can declare reactive state using Vue's `reactive()` API. Objects created from `reactive()` are JavaScript [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) that work just like normal objects:
16
+
변경 시, 업데이트를 트리거할 수 있는 상태는 **반응형**으로 간주됩니다.
17
+
Vue의 `reactive()` API를 사용하여 반응형 상태를 선언할 수 있습니다.
18
+
`reactive()`로 생성된 객체는 일반 객체처럼 작동하는 JavaScript [프록시](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)입니다:
`reactive()` only works on objects (including arrays and built-in types like `Map` and `Set`). `ref()`, on the other hand, can take any value type and create an object that exposes the inner value under a `.value` property:
31
+
`reactive()`는 객체(배열, `Map`, `Set`과 같은 빌트인 타입 포함)에서만 작동합니다.
32
+
반면에 `ref()`는 모든 타입의 값을 사용할 수 있으며,
33
+
`.value` 속성으로 내부 값을 노출하는 객체를 생성합니다.
27
34
28
35
```js
29
36
import { ref } from'vue'
30
37
31
-
constmessage=ref('Hello World!')
38
+
constmessage=ref('안녕 Vue!')
32
39
33
-
console.log(message.value) // "Hello World!"
34
-
message.value='Changed'
40
+
console.log(message.value) // "안녕 Vue!"
41
+
message.value='메세지 변경됨'
35
42
```
36
43
37
-
Details on `reactive()`and`ref()` are discussed in <atarget="_blank"href="/guide/essentials/reactivity-fundamentals.html">Guide - Reactivity Fundamentals</a>.
44
+
`reactive()`및`ref()`에 대한 자세한 내용은 <atarget="_blank"href="/guide/essentials/reactivity-fundamentals.html">가이드 - 반응형 기초</a>에서 설명합니다.
38
45
39
46
<divclass="sfc">
40
47
41
-
Reactive state declared in the component's `<script setup>` block can be used directly in the template. This is how we can render dynamic text based on the value of the `counter` object and `message` ref, using mustaches syntax:
48
+
컴포넌트의 `<script setup>` 블록에 선언된 반응형 상태는 템플릿에서 직접 사용할 수 있습니다.
49
+
이것은 이중 중괄호 문법을 사용하여 `counter` 객체와 `message` ref의 값을 동적으로 텍스트로 렌더링하는 방법입니다.
42
50
43
51
</div>
44
52
45
53
<divclass="html">
46
54
47
-
The object being passed to `createApp()` is a Vue component. A component's state should be declared inside its `setup()` function, and returned using an object:
55
+
`createApp()`에 전달되는 객체는 Vue 컴포넌트입니다.
56
+
컴포넌트의 상태는 `setup()` 함수 내에서 선언되어야 하며, 객체를 사용하여 반환되어야 합니다:
48
57
49
58
```js{2,5}
50
59
setup() {
51
60
const counter = reactive({ count: 0 })
52
-
const message = ref('Hello World!')
61
+
const message = ref('안녕 Vue!')
53
62
return {
54
63
counter,
55
64
message
56
65
}
57
66
}
58
67
```
59
68
60
-
Properties in the returned object will be made available in the template. This is how we can render dynamic text based on the value of `message`, using mustaches syntax:
69
+
반환된 객체의 속성은 템플릿에서 사용할 수 있습니다.
70
+
이것은 이중 중괄호 문법을 사용하여 `message` 값을 동적 텍스트로 렌더링하는 방법입니다:
61
71
62
72
</div>
63
73
64
74
```vue-html
65
75
<h1>{{ message }}</h1>
66
-
<p>count is: {{ counter.count }}</p>
76
+
<p>숫자 세기: {{ counter.count }}</p>
67
77
```
68
78
69
-
Notice how we did not need to use `.value` when accessing the `message` ref in templates: it is automatically unwrapped for more succinct usage.
79
+
템플릿에서 `message` ref에 접근할 때, `.value`를 사용할 필요가 없습니다!
80
+
보다 간결한 사용을 위해 자동으로 언래핑됩니다.
70
81
71
82
</div>
72
83
73
84
<divclass="options-api">
74
85
75
-
State that can trigger updates when changed are considered **reactive**. In Vue, reactive state is held in components. In the example code, the object being passed to `createApp()` is a component.
86
+
변경 시, 업데이트를 트리거할 수 있는 상태는 **반응형**으로 간주됩니다.
87
+
Vue에서 반응형 상태는 컴포넌트에 유지됩니다.
88
+
예제 코드에서 `createApp()`에 전달되는 객체는 컴포넌트입니다.
76
89
77
-
We can declare reactive state using the `data`component option, which should be a function that returns an object:
90
+
컴포넌트에서 객체를 반환해야하는 함수 `data`옵션을 사용하여 반응형 상태를 선언할 수 있습니다:
78
91
79
92
<divclass="sfc">
80
93
81
94
```js{3-5}
82
95
export default {
83
96
data() {
84
97
return {
85
-
message: 'Hello World!'
98
+
message: '안녕 Vue!'
86
99
}
87
100
}
88
101
}
@@ -95,36 +108,38 @@ export default {
95
108
createApp({
96
109
data() {
97
110
return {
98
-
message: 'Hello World!'
111
+
message: '안녕 Vue!'
99
112
}
100
113
}
101
114
})
102
115
```
103
116
104
117
</div>
105
118
106
-
The `message` property will be made available in the template. This is how we can render dynamic text based on the value of `message`, using mustaches syntax:
119
+
템플릿에서 `message` 속성을 사용할 수 있습니다.
120
+
이것은 이중 중괄호 문법을 사용하여 `message` 값을 동적으로 텍스트로 렌더링하는 방법입니다:
107
121
108
122
```vue-html
109
123
<h1>{{ message }}</h1>
110
124
```
111
125
112
126
</div>
113
127
114
-
The content inside the mustaches is not limited to just identifiers or paths - we can use any valid JavaScript expression:
0 commit comments