Skip to content

Commit

Permalink
Update ko (#22)
Browse files Browse the repository at this point in the history
* Update reactivity-fundamentals.md (#2442)

* docs: transition hook add comment (#2441)

* Update reactivity-fundamentals.md (#2439)
  • Loading branch information
niceplugin authored Aug 1, 2023
1 parent 220c65f commit 579f85d
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 5 deletions.
2 changes: 2 additions & 0 deletions src/guide/built-ins/transition.md
Original file line number Diff line number Diff line change
Expand Up @@ -393,6 +393,8 @@ function onEnter(el, done) {

// μ§„μž… νŠΈλžœμ§€μ…˜μ΄ μ™„λ£Œλ˜λ©΄ ν˜ΈμΆœλ©λ‹ˆλ‹€.
function onAfterEnter(el) {}

// μ§„μž… νŠΈλžœμ§€μ…˜μ΄ μ™„λ£Œλ˜κΈ° μ „, μ·¨μ†Œλ  λ•Œ ν˜ΈμΆœλ©λ‹ˆλ‹€.
function onEnterCancelled(el) {}

// μ§„μΆœ ν›… 전에 ν˜ΈμΆœλ©λ‹ˆλ‹€.
Expand Down
10 changes: 5 additions & 5 deletions src/guide/essentials/reactivity-fundamentals.md
Original file line number Diff line number Diff line change
Expand Up @@ -204,13 +204,13 @@ SFCλ₯Ό μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” κ²½μš°μ—λ„ [`setup()`](/api/composition-api-setup)

### μ™œ Refs μž…λ‹ˆκΉŒ? \*\* {#why-refs}

일반 λ³€μˆ˜ λŒ€μ‹  `.value`κ°€ ν¬ν•¨λœ refκ°€ ν•„μš”ν•œ μ΄μœ κ°€ κΆκΈˆν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό μ„€λͺ…ν•˜κΈ° μœ„ν•΄ Vue의 λ°˜μ‘μ„± μ‹œμŠ€ν…œμ΄ μ–΄λ–»κ²Œ μž‘λ™ν•˜λŠ”μ§€ κ°„λž΅ν•˜κ²Œ λ…Όμ˜ν•΄μ•Ό ν•©λ‹ˆλ‹€.
μ™œ μš°λ¦¬κ°€ 일반 λ³€μˆ˜ λŒ€μ‹  `.value`κ°€ μžˆλŠ” refλ₯Ό ν•„μš”λ‘œ ν•˜λŠ”μ§€ κΆκΈˆν•΄ν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό μ„€λͺ…ν•˜κΈ° μœ„ν•΄μ„œλŠ” Vue의 λ°˜μ‘μ„± μ‹œμŠ€ν…œμ΄ μ–΄λ–»κ²Œ μž‘λ™ν•˜λŠ”μ§€ κ°„λ‹¨ν•˜κ²Œ λ…Όμ˜ν•΄μ•Ό ν•©λ‹ˆλ‹€.

ν…œν”Œλ¦Ώμ—μ„œ refλ₯Ό μ‚¬μš©ν•˜κ³  λ‚˜μ€‘μ— ref의 값을 λ³€κ²½ν•˜λ©΄ VueλŠ” μžλ™μœΌλ‘œ λ³€κ²½ 사항을 κ°μ§€ν•˜κ³  이에 따라 DOM을 μ—…λ°μ΄νŠΈν•©λ‹ˆλ‹€. μ΄λŠ” 쒅속성 좔적 기반 λ°˜μ‘μ„± μ‹œμŠ€ν…œμœΌλ‘œ κ°€λŠ₯ν•©λ‹ˆλ‹€. μ»΄ν¬λ„ŒνŠΈκ°€ 처음으둜 λ Œλ”λ§λ˜λ©΄ VueλŠ” λ Œλ”λ§ 쀑에 μ‚¬μš©λœ λͺ¨λ“  μ°Έμ‘°λ₯Ό **좔적**ν•©λ‹ˆλ‹€. λ‚˜μ€‘μ— refκ°€ λ³€κ²½λ˜λ©΄ 이λ₯Ό μΆ”μ ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈμ— λŒ€ν•΄ λ‹€μ‹œ λ Œλ”λ§μ„ **트리거**ν•©λ‹ˆλ‹€.
ν…œν”Œλ¦Ώμ—μ„œ refλ₯Ό μ‚¬μš©ν•˜κ³  λ‚˜μ€‘μ— ref의 값을 λ³€κ²½ν•˜λ©΄, VueλŠ” μžλ™μœΌλ‘œ 이 변경을 κ°μ§€ν•˜κ³  DOM을 μ μ ˆν•˜κ²Œ μ—…λ°μ΄νŠΈν•©λ‹ˆλ‹€. μ΄λŠ” μ˜μ‘΄μ„± 좔적 기반의 λ°˜μ‘ν˜• μ‹œμŠ€ν…œμœΌλ‘œ κ°€λŠ₯ν•©λ‹ˆλ‹€. μ»΄ν¬λ„ŒνŠΈκ°€ 처음 λ Œλ”λ§λ  λ•Œ, VueλŠ” λ Œλ”λ§ κ³Όμ •μ—μ„œ μ‚¬μš©λœ λͺ¨λ“  refλ₯Ό **좔적**ν•©λ‹ˆλ‹€. λ‚˜μ€‘μ— refκ°€ λ³€κ²½λ˜λ©΄, 이λ₯Ό μΆ”μ ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈμ— λŒ€ν•΄ μž¬λ Œλ”λ§μ„ **트리거**ν•©λ‹ˆλ‹€.

ν‘œμ€€ JavaScript μ—μ„œλŠ” 일반 λ³€μˆ˜μ˜ μ•‘μ„ΈμŠ€ λ˜λŠ” λ³€ν˜•μ„ 감지할 방법이 μ—†μŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ μ†μ„±μ˜ get 및 set μž‘μ—…μ„ κ°€λ‘œμ±Œ 수 μžˆμŠ΅λ‹ˆλ‹€.
ν‘œμ€€ JavaScriptμ—μ„œλŠ” 일반 λ³€μˆ˜μ˜ μ ‘κ·Όμ΄λ‚˜ λ³€ν˜•μ„ κ°μ§€ν•˜λŠ” 방법이 μ—†μŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ, getter와 setter λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ 객체의 μ†μ„±μ˜ get 및 set 연산을 κ°€λ‘œμ±Œ 수 μžˆμŠ΅λ‹ˆλ‹€.

`.value` 속성은 Vueκ°€ μ°Έμ‘°κ°€ μ•‘μ„ΈμŠ€λ˜κ±°λ‚˜ λ³€κ²½λœ μ‹œκΈ°λ₯Ό 감지할 수 μžˆλŠ” 기회λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€. λ‚΄λΆ€μ μœΌλ‘œ VueλŠ” getterμ—μ„œ 좔적을 μˆ˜ν–‰ν•˜κ³  setterμ—μ„œ 트리거λ₯Ό μˆ˜ν–‰ν•©λ‹ˆλ‹€. κ°œλ…μ μœΌλ‘œ refλŠ” λ‹€μŒκ³Ό 같은 개체둜 생각할 수 μžˆμŠ΅λ‹ˆλ‹€:
`.value` 속성은 Vueμ—κ²Œ refκ°€ μ•‘μ„ΈμŠ€λ˜κ±°λ‚˜ λ³€κ²½λ˜μ—ˆμ„ λ•Œλ₯Ό 감지할 기회λ₯Ό μ€λ‹ˆλ‹€. λ‚΄λΆ€μ μœΌλ‘œ, VueλŠ” getterμ—μ„œ 좔적을 μˆ˜ν–‰ν•˜κ³ , setterμ—μ„œ 트리거λ₯Ό μˆ˜ν–‰ν•©λ‹ˆλ‹€. κ°œλ…μ μœΌλ‘œ, refλ₯Ό λ‹€μŒκ³Ό 같은 객체라고 생각할 수 μžˆμŠ΅λ‹ˆλ‹€:

```js
// μ‹€μ œ κ΅¬ν˜„μ΄ μ•„λ‹Œ μœ μ‚¬ μ½”λ“œ
Expand Down Expand Up @@ -462,7 +462,7 @@ console.log(proxy.nested === raw) // false
state = reactive({ count: 1 })
```

3. **λΆ„ν•΄ 할당에 μΉœν™”μ μ΄μ§€ μ•ŠμŒ:** λ°˜μ‘ 객체의 속성을 지역 λ³€μˆ˜λ‘œ λΆ„ν•΄ν•˜κ±°λ‚˜ ν•΄λ‹Ή 속성을 ν•¨μˆ˜μ— 전달할 λ•Œ λ°˜μ‘ 연결이 λŠμ–΄μ§‘λ‹ˆλ‹€:
3. **λΆ„ν•΄ 할당에 μΉœν™”μ μ΄μ§€ μ•ŠμŒ:** λ°˜μ‘ν˜• 객체의 μ›μ‹œ νƒ€μž… 속성을 지역 λ³€μˆ˜λ‘œ λΆ„ν•΄ν•˜κ±°λ‚˜, κ·Έ 속성을 ν•¨μˆ˜μ— 전달할 λ•Œ, λ°˜μ‘μ„± 연결이 λŠμ–΄μ§‘λ‹ˆλ‹€:

```js
const state = reactive({ count: 0 })
Expand Down

1 comment on commit 579f85d

@vercel
Copy link

@vercel vercel bot commented on 579f85d Aug 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.