Skip to content

Commit 5637658

Browse files
authored
Merge pull request #333 from leezu2020/patch-1
fix: μ˜€νƒˆμž μ •μ •(개체 -> 객체)
2 parents 5cfef76 + 800fd4d commit 5637658

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

β€Žsrc/guide/essentials/reactivity-fundamentals.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,7 @@ function mutateDeeply() {
336336

337337
기본이 μ•„λ‹Œ 값은 μ•„λž˜μ—μ„œ μ„€λͺ…ν•˜λŠ” [`reactive()`](#reactive)λ₯Ό 톡해 λ°˜μ‘ν˜• ν”„λ‘μ‹œλ‘œ μ „ν™˜λ©λ‹ˆλ‹€.
338338

339-
[shallow refs(얕은 μ°Έμ‘°)](/api/reactivity-advanced#shallowref)λ₯Ό μ‚¬μš©ν•˜μ—¬ κΉŠμ€ λ°˜μ‘μ„±μ„ μ˜΅νŠΈμ•„μ›ƒν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. 얕은 참쑰의 경우 λ°˜μ‘μ„±μ„ μœ„ν•΄ `.value` μ•‘μ„ΈμŠ€λ§Œ μΆ”μ λ©λ‹ˆλ‹€. 얕은 μ°Έμ‘°λŠ” 큰 개체의 κ΄€μ°° λΉ„μš©μ„ ν”Όν•˜κ±°λ‚˜ μ™ΈλΆ€ λΌμ΄λΈŒλŸ¬λ¦¬μ—μ„œ λ‚΄λΆ€ μƒνƒœλ₯Ό κ΄€λ¦¬ν•˜λŠ” 경우 μ„±λŠ₯을 μ΅œμ ν™”ν•˜λŠ” 데 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
339+
[shallow refs(얕은 μ°Έμ‘°)](/api/reactivity-advanced#shallowref)λ₯Ό μ‚¬μš©ν•˜μ—¬ κΉŠμ€ λ°˜μ‘μ„±μ„ μ˜΅νŠΈμ•„μ›ƒν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. 얕은 참쑰의 경우 λ°˜μ‘μ„±μ„ μœ„ν•΄ `.value` μ•‘μ„ΈμŠ€λ§Œ μΆ”μ λ©λ‹ˆλ‹€. 얕은 μ°Έμ‘°λŠ” 큰 객체의 κ΄€μ°° λΉ„μš©μ„ ν”Όν•˜κ±°λ‚˜ μ™ΈλΆ€ λΌμ΄λΈŒλŸ¬λ¦¬μ—μ„œ λ‚΄λΆ€ μƒνƒœλ₯Ό κ΄€λ¦¬ν•˜λŠ” 경우 μ„±λŠ₯을 μ΅œμ ν™”ν•˜λŠ” 데 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
340340

341341
μΆ”κ°€ 정보:
342342

@@ -404,7 +404,7 @@ const state = reactive({ count: 0 })
404404
</button>
405405
```
406406

407-
λ°˜μ‘ν˜• κ°œμ²΄λŠ” [JavaScript Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)이며 일반 개체처럼 μž‘λ™ν•©λ‹ˆλ‹€. 차이점은 Vueκ°€ λ°˜μ‘μ„± 좔적 및 νŠΈλ¦¬κ±°λ§μ„ μœ„ν•΄ λ°˜μ‘μ„± 객체의 λͺ¨λ“  속성에 λŒ€ν•œ μ•‘μ„ΈμŠ€ 및 λ³€ν˜•μ„ κ°€λ‘œμ±Œ 수 μžˆλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€.
407+
λ°˜μ‘ν˜• κ°μ²΄λŠ” [JavaScript Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)이며 일반 객체처럼 μž‘λ™ν•©λ‹ˆλ‹€. 차이점은 Vueκ°€ λ°˜μ‘μ„± 좔적 및 νŠΈλ¦¬κ±°λ§μ„ μœ„ν•΄ λ°˜μ‘μ„± 객체의 λͺ¨λ“  속성에 λŒ€ν•œ μ•‘μ„ΈμŠ€ 및 λ³€ν˜•μ„ κ°€λ‘œμ±Œ 수 μžˆλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€.
408408

409409
`reactive()`λŠ” 객체λ₯Ό μ‹¬μΈ΅μ μœΌλ‘œ λ³€ν™˜ν•©λ‹ˆλ‹€. μ€‘μ²©λœ 객체도 μ•‘μ„ΈμŠ€ν•  λ•Œ `reactive()`둜 λž˜ν•‘λ©λ‹ˆλ‹€. ref 값이 객체일 λ•Œ λ‚΄λΆ€μ μœΌλ‘œ `ref()`에 μ˜ν•΄ ν˜ΈμΆœλ˜κΈ°λ„ ν•©λ‹ˆλ‹€. 얕은 참쑰와 μœ μ‚¬ν•˜κ²Œ κΉŠμ€ λ°˜μ‘μ„±μ„ μ˜΅νŠΈμ•„μ›ƒν•˜κΈ° μœ„ν•œ [`shallowReactive()`](/api/reactivity-advanced#shallowreactive) API도 μžˆμŠ΅λ‹ˆλ‹€.
410410

@@ -452,7 +452,7 @@ console.log(proxy.nested === raw) // false
452452

453453
1. **μ œν•œλœ κ°’ μœ ν˜•:** 객체 μœ ν˜•(객체, λ°°μ—΄ 및 [μ»¬λ ‰μ…˜ μœ ν˜•](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects#keyed_collections)μ—λ§Œ μž‘λ™ν•©λ‹ˆλ‹€. (예: `Map` 및 `Set`). κ·ΈλŸ¬λ‚˜ `string`, `number` λ˜λŠ” `boolean`κ³Ό 같은 [κΈ°λ³Έ μœ ν˜•](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)을 λ³΄μœ ν•  수 μ—†μŠ΅λ‹ˆλ‹€.
454454

455-
2. **전체 객체λ₯Ό λŒ€μ²΄ν•  수 μ—†μŒ:** Vue의 λ°˜μ‘μ„± 좔적은 속성 μ•‘μ„ΈμŠ€λ₯Ό 톡해 μž‘λ™ν•˜λ―€λ‘œ λ°˜μ‘ 객체에 λŒ€ν•œ λ™μΌν•œ μ°Έμ‘°λ₯Ό 항상 μœ μ§€ν•΄μ•Ό ν•©λ‹ˆλ‹€. 즉, 첫 번째 참쑰에 λŒ€ν•œ λ°˜μ‘μ„± 연결이 λŠμ–΄μ§€κΈ° λ•Œλ¬Έμ— λ°˜μ‘μ„± 개체λ₯Ό μ‰½κ²Œ "λŒ€μ²΄(replace)"ν•  수 μ—†μŠ΅λ‹ˆλ‹€:
455+
2. **전체 객체λ₯Ό λŒ€μ²΄ν•  수 μ—†μŒ:** Vue의 λ°˜μ‘μ„± 좔적은 속성 μ•‘μ„ΈμŠ€λ₯Ό 톡해 μž‘λ™ν•˜λ―€λ‘œ λ°˜μ‘ 객체에 λŒ€ν•œ λ™μΌν•œ μ°Έμ‘°λ₯Ό 항상 μœ μ§€ν•΄μ•Ό ν•©λ‹ˆλ‹€. 즉, 첫 번째 참쑰에 λŒ€ν•œ λ°˜μ‘μ„± 연결이 λŠμ–΄μ§€κΈ° λ•Œλ¬Έμ— λ°˜μ‘μ„± 객체λ₯Ό μ‰½κ²Œ "λŒ€μ²΄(replace)"ν•  수 μ—†μŠ΅λ‹ˆλ‹€:
456456

457457
```js
458458
let state = reactive({ count: 0 })
@@ -474,7 +474,7 @@ console.log(proxy.nested === raw) // false
474474

475475
// ν•¨μˆ˜λŠ” 일반 숫자λ₯Ό μˆ˜μ‹ ν•˜κ³ 
476476
// state.count에 λŒ€ν•œ λ³€κ²½ 사항을 좔적할 수 μ—†μŠ΅λ‹ˆλ‹€.
477-
// λ°˜μ‘μ„±μ„ μœ μ§€ν•˜λ €λ©΄ 전체 개체λ₯Ό 전달해야 ν•©λ‹ˆλ‹€.
477+
// λ°˜μ‘μ„±μ„ μœ μ§€ν•˜λ €λ©΄ 전체 객체λ₯Ό 전달해야 ν•©λ‹ˆλ‹€.
478478
callSomeFunction(state.count)
479479
```
480480

0 commit comments

Comments
 (0)