κ³΅λΆ€ν•˜λŠ” λΈ”λ‘œκ·Έ

μžλ°”μŠ€ν¬λ¦½νŠΈ λ°˜μ‘ν˜•μ— λŒ€ν•œ 쒋은 μ„€λͺ… (The Best Explanation of JavaScript Reactivity) λ³Έλ¬Έ

μžλ°”μŠ€ν¬λ¦½νŠΈ

μžλ°”μŠ€ν¬λ¦½νŠΈ λ°˜μ‘ν˜•μ— λŒ€ν•œ 쒋은 μ„€λͺ… (The Best Explanation of JavaScript Reactivity)

devtimothy 2018.08.08 08:38

The Best Explanation of JavaScript Reactivity πŸŽ†

이 글은 μ›μž‘μžμ˜ ν—ˆλ½μ„ λ°›μ•„ λ²ˆμ—­ν•˜μ˜€μœΌλ©°, κΈ€μ˜ μΆœμ²˜λŠ” https://medium.com/vue-mastery/the-best-explanation-of-javascript-reactivity-fea6112dd80d μž…λ‹ˆλ‹€.

κΈ°μˆ μ΄λ‚˜ λ²ˆμ—­μ— λŒ€ν•΄ 의견이 μžˆμœΌμ‹œλ©΄ λŒ“κΈ€μ„ λ‚¨κ²¨μ£Όμ‹œλ©΄ λ°˜μ˜ν•˜λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. κ°μ‚¬ν•©λ‹ˆλ‹€.

λ§Žμ€ ν”„λ‘ νŠΈμ—”λ“œ μžλ°”μŠ€ν¬λ¦½νŠΈ ν”„λ ˆμž„μ›Œν¬ (예 : Angular, React, and Vue)μ—λŠ” 자체 λ°˜μ‘ν˜• 엔진이 μžˆμŠ΅λ‹ˆλ‹€. λ°˜μ‘ν˜•μ˜ μž‘λ™ 원리λ₯Ό μ΄ν•΄ν•˜λ©΄ 개발 κΈ°μˆ μ„ ν–₯μƒμ‹œν‚¬ 수 있고 JavaScript ν”„λ ˆμž„μ›Œν¬λ₯Όλ³΄λ‹€ 효과적으둜 μ‚¬μš© ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ•„λž˜μ˜ μ˜μƒκ³Ό μ•„ν‹°ν΄μ—μ„œλŠ” Vue μ†ŒμŠ€ μ½”λ“œμ—μ„œ λ³Ό 수 μžˆλŠ” 것과 λ™μΌν•œ μ’…λ₯˜μ˜ λ°˜μ‘ν˜•(Reactivity)을 λΉŒλ“œν•©λ‹ˆλ‹€.

기사λ₯Ό μ½λŠ” λŒ€μ‹ μ΄ λΉ„λ””μ˜€λ₯Ό λ³΄λŠ” 경우 이 μ‹œλ¦¬μ¦ˆ μ˜μƒ 을 λ³΄μ„Έμš”. Vue의 μ°½μ‹œμž 인 Evan You와 λ°˜μ‘ν˜• 및 ν”„λ‘μ‹œλ₯Ό λ…Όμ˜ν•©λ‹ˆλ‹€.

πŸ’‘ λ°˜μ‘ν˜• μ‹œμŠ€ν…œ

Vue의 λ°˜μ‘ν˜• μ‹œμŠ€ν…œμ€ 처음 μž‘λ™μ‹œν‚¬ λ•Œ 마술처럼 보일 수 μžˆμŠ΅λ‹ˆλ‹€. 이 Vue 앱을 μ‚΄νŽ΄λ΄…μ‹œλ‹€.

VueλŠ” price 값이 λ°”λ€Œλ©΄ μ„Έ 가지 μž‘μ—…μ„ ν•˜κ²Œ λ©λ‹ˆλ‹€.

  • μ›Ή νŽ˜μ΄μ§€μ—μ„œ price값을 μ—…λ°μ΄νŠΈ

  • price * quantityλ₯Ό κ³±ν•˜λŠ” ν‘œν˜„μ‹μ„ λ‹€μ‹œ κ³„μ‚°ν•˜κ³  νŽ˜μ΄μ§€λ₯Ό μ—…λ°μ΄νŠΈ

  • totalPriceWithTax ν•¨μˆ˜λ₯Ό λ‹€μ‹œ ν˜ΈμΆœν•˜κ³  νŽ˜μ΄μ§€λ₯Ό μ—…λ°μ΄νŠΈ

μ—¬κΈ°μ„œ ꢁ금증이 μƒκΈ°μ‹€ν…λ°μš”, priceκ°€ λ°”λ€Œλ©΄ VueλŠ” 무엇을 μ—…λ°μ΄νŠΈ ν•΄μ•Ό ν•˜λŠ”μ§€λ₯Ό μ–΄λ–»κ²Œ μ•Œ 수 있으며, μ–΄λ–»κ²Œ μ „λΆ€ 좔적 ν•  수 μžˆμ„κΉŒμš”?

μ΄λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ ν”„λ‘œκ·Έλž˜λ°μ΄ μ •μƒμ μœΌλ‘œ μž‘λ™ν•˜λŠ” 방식이 μ•„λ‹™λ‹ˆλ‹€

이 말이 λͺ…ν™•ν•˜κ²Œ λŠκ»΄μ§€μ§€ μ•ŠμœΌμ‹œλ‹€λ©΄, μš°λ¦¬κ°€ λ‹€λ£° μŸμ μ€ ν”„λ‘œκ·Έλž˜λ°μ΄ λŒ€κ°œ 이런 μ‹μœΌλ‘œ μž‘λ™ν•˜μ§€ μ•ŠλŠ”λ‹€λŠ” μ μž…λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄μ„œ μ•„λž˜ μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λ©΄ λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

μ–΄λ–€ 값이 λ‚˜μ˜¬κ±° κ°™λ‚˜μš”? Vueλ₯Ό μ‚¬μš©ν•˜λŠ”κ²ƒμ΄ μ•„λ‹ˆλ―€λ‘œ 10을 λ‚˜νƒ€λ‚Ό κ²λ‹ˆλ‹€.

Vueμ—μ„œλŠ” total λ˜λŠ” quantityκ°€ μ—…λ°μ΄νŠΈ 될 λ•Œλ§ˆλ‹€ total이 μ—…λ°μ΄νŠΈ 되기λ₯Ό λ°”λžλ‹ˆλ‹€.

μ•ˆνƒ€κΉκ²Œλ„ JavaScriptλŠ” μ ˆμ°¨ν˜•μ΄μ§€, λ°˜μ‘ν˜•μ΄ μ•„λ‹ˆλ―€λ‘œ μ‹€μ œλ‘œλŠ” λ™μž‘ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. total을 λ°˜μ‘ν˜•μœΌλ‘œ λ§Œλ“€κΈ° μœ„ν•΄μ„œ JavaScriptλ₯Ό μ‚¬μš©ν•˜μ—¬ λ‹€λ₯΄κ²Œ μž‘λ™ν•˜κ²Œ ν•©λ‹ˆλ‹€.

⚠️ 문제

total을 κ³„μ‚°ν•΄μ•Όν•˜κΈ° λ•Œλ¬Έμ— price λ˜λŠ” quantityκ°€ λ³€κ²½ 될 λ•Œλ§ˆλ‹€ μž¬μ‹€ν–‰ν•΄μ•Ό ν•œλ‹€.

βœ… μ†”λ£¨μ…˜

μš°μ„ μ μœΌλ‘œλŠ” 앱에 μ•Œλ¦΄ 수 μžˆλŠ” 방법이 ν•„μš”ν•©λ‹ˆλ‹€. "λ‚΄κ°€ μ‹€ν–‰ν•˜λ €κ³  ν•˜λŠ” μ½”λ“œλ₯Ό μ €μž₯ν•΄ λ‘μ—ˆλ‹€κ°€ λ‹€λ₯Έ λ•Œ μ‹€ν–‰ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€." 그러면 원할 λ•Œ μ½”λ“œλ₯Ό μ‹€ν–‰ ν•  수 있겠죠. price λ˜λŠ” quantity λ³€μˆ˜κ°€ μ—…λ°μ΄νŠΈ 되면, μ €μž₯된 μ½”λ“œλ₯Ό λ‹€μ‹œ μ‹€ν–‰ν•˜κ²Œ ν•©λ‹ˆλ‹€.

ν•¨μˆ˜λ₯Ό λ‹€μ‹œ μ‹€ν–‰ν•˜κΈ° μœ„ν•΄μ„œ 이 ν•¨μˆ˜λ₯Ό 기둝해 λ‘‘λ‹ˆλ‹€.

읡λͺ…μ˜ ν•¨μˆ˜λ₯Ό target λ³€μˆ˜ μ•ˆμ— μ €μž₯ν•˜κ³ ,record ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•©λ‹ˆλ‹€. ES6 ν™”μ‚΄ν‘œ ꡬ문을 μ‚¬μš©ν•˜μ—¬ λ‹€μŒκ³Ό 같이 μž‘μ„±ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

record의 μ •μ˜λŠ” κ°„λ‹¨ν•©λ‹ˆλ‹€.

μš°λ¦¬λŠ” target을 μ €μž₯ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. (ν•΄λ‹Ή μ½”λ“œμ˜ 경우 { total = price * quantity }). κΈ°λ‘ν•œ λͺ¨λ“  것을 μ‹€ν–‰ν•˜λŠ” replay ν•¨μˆ˜λ₯Ό λ‚˜μ€‘μ— μ‹€ν–‰ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. .

이것은 μŠ€ν† λ¦¬μ§€ λ°°μ—΄ 내뢀에 μ €μž₯된 λͺ¨λ“  읡λͺ… ν•¨μˆ˜μ„ 거쳐 각각을 μ‹€ν–‰ν•©λ‹ˆλ‹€.

그러면 μ½”λ“œμ—μ„œ λ‹€μŒκ³Ό 같이 ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

κ°„λ‹¨ν•˜μ£ ? μ•„λž˜λŠ” 전체 μ½”λ“œμž…λ‹ˆλ‹€. μ²˜μŒλΆ€ν„° λκΉŒμ§€ μ­‰ 읽고 μ΄ν•΄ν•˜κ³ μž ν•˜λŠ” 경우 μ°Έκ³ ν•˜μ„Έμš”.

⚠️ 문제

ν•„μš”μ— λ”°λΌμ„œ 기둝할 target을 μ‹€ν–‰ν•  μˆ˜λ„ μžˆμ§€λ§Œ, μ•±μœΌλ‘œ ν™•μž₯ν•  수 μžˆλŠ” 더 κ°•λ ₯ν•œ μ†”λ£¨μ…˜μ„ κ°–λŠ”κ²Œ 쒋을 κ²ƒμž…λ‹ˆλ‹€. μ•„λ§ˆλ„ μž¬μ‹€ν–‰μ„ 원할 λ•Œ, μ•Œλ¦Όμ„ λ°›λŠ” νƒ€κ²Ÿ λͺ©λ‘μ„ μœ μ§€ κ΄€λ¦¬ν•˜λŠ” 클래슀일 κ²ƒμž…λ‹ˆλ‹€.

βœ… μ†”λ£¨μ…˜ : 쒅속 클래슀

이 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ μ‹œμž‘ν•  수 μžˆλŠ” ν•œ 가지 방법은 자체 ν΄λž˜μŠ€μ— 이 λ™μž‘μ„ μΊ‘μŠν™” ν•¨μœΌλ‘œμ¨, κ΄€μ°°μž νŒ¨ν„΄(observer pattern)을 쒅속 클래슀둜 κ΅¬ν˜„ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

λ”°λΌμ„œ 쒅속성 (Vueκ°€ 일을 μ²˜λ¦¬ν•˜λŠ” 방법에 더 κ°€κΉμŠ΅λ‹ˆλ‹€.)을 κ΄€λ¦¬ν•˜κΈ° μœ„ν•œ JavaScript 클래슀λ₯Ό λ§Œλ“ λ‹€λ©΄ λ‹€μŒκ³Ό 같을 κ²ƒμž…λ‹ˆλ‹€.

storage λŒ€μ‹ μ— 읡λͺ… ν•¨μˆ˜λ₯Ό subscribers에 μ €μž₯ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. record ν•¨μˆ˜ λŒ€μ‹ μ— depend을 ν˜ΈμΆœν•˜κ³  replay λŒ€μ‹  notifyλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. 이λ₯Ό μ‹€ν–‰ν•˜λ €λ©΄ λ‹€μŒ μ½”λ“œλ₯Ό μž‘μ„±ν•˜μ„Έμš”.

μ—¬μ „νžˆ μž‘λ™ν•˜λ©° μ½”λ“œκ°€ 더 μž¬μ‚¬μš© κ°€λŠ₯ν•΄ μ‘ŒμŠ΅λ‹ˆλ‹€. 쑰금 μ΄μƒν•œ 건 target μ„€μ •κ³Ό μ‹€ν–‰λΏμž…λ‹ˆλ‹€.

⚠️ 문제

μ•žμœΌλ‘œλŠ” 각 λ³€μˆ˜μ— λŒ€ν•΄ Dep 클래슀λ₯Ό κ°–κ²Œ 될 것이며, μ—…λ°μ΄νŠΈκ°€ ν•„μš”ν•œ 읡λͺ… ν•¨μˆ˜λ₯Ό λ§Œλ“œλŠ” λ™μž‘μ„ μΊ‘μŠν™”ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. μ•„λ§ˆλ„ κ°μ‹œμž (watcher) κΈ°λŠ₯이 μ΄λŸ¬ν•œ 행동을 μ²˜λ¦¬ν•  κ²λ‹ˆλ‹€.

(μœ„μ—μ„œ μž‘μ„±ν•œ μ½”λ“œμ™€ κ°™μŠ΅λ‹ˆλ‹€.)

μœ„ μ½”λ“œλ₯Ό ν˜ΈμΆœν•˜λŠ” λŒ€μ‹ μ—, λ‹€μŒμ„ ν˜ΈμΆœν•˜λ„λ‘ ν•©μ‹œλ‹€.

βœ… μ†”λ£¨μ…˜ : κ°μ‹œμž (Watcher) ν•¨μˆ˜

Watcher ν•¨μˆ˜μ—μ„œ μš°λ¦¬λŠ” λͺ‡ 가지 κ°„λ‹¨ν•œ 일을 ν•  수 μžˆμŠ΅λ‹ˆλ‹€ :

λ³΄μ‹œλ‹€μ‹œν”Ό, watcher ν•¨μˆ˜λŠ” myFunc 인수둜 μ·¨ν•΄μ„œ μ „μ—­ target ν”„λ‘œνΌν‹°λ‘œ μ„€μ •ν•˜κ³  dep.depend()λ₯Ό ν˜ΈμΆœν•˜μ—¬ νƒ€κ²Ÿμ„ κ΅¬λ…μž(subscriber)둜 μΆ”κ°€ν•˜κ³ target ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜κ³ , target을 λ¦¬μ…‹ν•©λ‹ˆλ‹€.

μ•„λž˜λŠ” μ‹€ν–‰ κ²°κ³Όμž…λ‹ˆλ‹€.

You might be wondering why we implemented target as a global variable, rather than passing it into our functions where needed. There is a good reason for this, which will become obvious by the end of our article.

target을 μ „μ—­ λ³€μˆ˜λ‘œ κ΅¬ν˜„ ν•œ μ΄μœ κ°€ κΆκΈˆν•˜μ‹€ν…λ°μš”, μ΄λŠ” 우리 μ•„ν‹°ν΄μ˜ λ§ˆμ§€λ§‰ λΆ€λΆ„ κ·Έ μ΄μœ κ°€ λͺ…ν™•ν•΄μ§ˆ κ²λ‹ˆλ‹€.

⚠️ 문제

μš°λ¦¬λŠ” ν•˜λ‚˜μ˜ Dep classλ₯Ό 가지고 μžˆμ§€λ§Œ, μš°λ¦¬κ°€ μ •λ§λ‘œ μ›ν•˜λŠ” 것은 각각의 λ³€μˆ˜κ°€ μžμ‹ μ˜ Depλ₯Ό 갖도둝 ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. 진도λ₯Ό 더 λ‚˜κ°€κΈ° 전에 ν”„λ‘œνΌν‹°λ₯Ό μ‚΄νŽ΄λ΄…μ‹œλ‹€.

우리의 각 ν”„λ‘œνΌν‹° (price 와 quantity)κ°€ κ·Έλ“€ μžμ‹ μ˜ λ‚΄λΆ€ Dep 클래슀λ₯Ό 가지고 μžˆλ‹€κ³  κ°€μ •ν•΄ λ΄…μ‹œλ‹€.

μ•„λž˜ μ½”λ“œλ₯Ό μ‹€ν–‰μ‹œν‚΅μ‹œλ‹€.

data.price 값에 μ ‘κ·Όν–ˆμœΌλ―€λ‘œ price ν”„λ‘œνΌν‹°μ˜ Dep ν΄λž˜μŠ€κ°€ target에 μ €μž₯λ˜μ–΄ μžˆλŠ” 읡λͺ… ν•¨μˆ˜λ₯Ό subscriber 배열에 pushν•˜κ³ μž ν•©λ‹ˆλ‹€(dep.depend() λ₯Ό ν˜ΈμΆœν•¨μœΌλ‘œμ„œ). data.quantity에 μ ‘κ·Όν–ˆμœΌλ―€λ‘œ amount ν”„λ‘œνΌν‹°μ˜ Dep ν΄λž˜μŠ€κ°€ 이 target에 μ €μž₯λ˜μ–΄ μžˆλŠ” 읡λͺ… ν•¨μˆ˜λ₯Ό subscriber 배열에 push ν•˜κ³ μž ν•©λ‹ˆλ‹€.

data.price 만 μ•‘μ„ΈμŠ€ν•˜λŠ” 또 λ‹€λ₯Έ 읡λͺ…μ˜ ν•¨μˆ˜κ°€ 있으면 price 속성 Dep ν΄λž˜μŠ€μ— κ·Έλƒ₯ pushν•˜κ³ μž ν•©λ‹ˆλ‹€.

μ–Έμ œ dep.notify()κ°€ price의 κ΅¬λ…μž(subscribers)μ—κ²Œ 호좜되게 ν• κΉŒμš”? priceκ°€ 정해지면 ν•¨μˆ˜κ°€ 호좜되게 ν•˜κ³ μž ν•©λ‹ˆλ‹€. 이 μ•„ν‹°ν΄μ˜ 끝 λΆ€λΆ„μ—μ„œ μ €λŠ” μ½˜μ†”μ— λ“€μ–΄κ°€μ„œ λ‹€μŒκ³Ό 같이 ν•  수 있게 ν•˜κ³ μž ν•©λ‹ˆλ‹€.

μš°λ¦¬λŠ” 데이터 ν”„λ‘œνΌν‹° (price λ‚˜ quantity와 같은)에 μ ‘κ·Όν•  방법이 ν•„μš”ν•©λ‹ˆλ‹€. κ·Έλž˜μ„œ μ ‘κ·Ό ν•  λ•Œ target을 κ΅¬λ…μž(subscriber) 배열에 μ €μž₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 그리고 λ³€κ²½λ˜λ©΄ subscriber 배열을 μ €μž₯ν•œ ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•©λ‹ˆλ‹€.

βœ… μ†”λ£¨μ…˜ : Object.defineProperty()

ν‘œμ€€ ES5 JavaScript 인 Object.defineProperty() ν•¨μˆ˜μ— λŒ€ν•΄ μ•Œμ•„μ•Όν•©λ‹ˆλ‹€. μ΄λŠ” ν”„λ‘œνΌν‹°μ— λŒ€ν•œ getter와 setter ν•¨μˆ˜λ₯Ό μ •μ˜ ν•  수 있게 ν•΄μ€λ‹ˆλ‹€. Dep ν΄λž˜μŠ€μ—μ„œ μ‚¬μš©ν•˜λŠ” 방법을 λ³΄μ—¬λ“œλ¦¬κΈ° 전에 λ¨Όμ € μ•„μ£Ό 기본적인 μ‚¬μš©λ²•μ„ 보여 λ“œλ¦¬κ² μŠ΅λ‹ˆλ‹€.

λ³΄μ‹œλ‹€μ‹œν”Ό 두 μ€„μ˜ λ‘œκ·Έκ°€ μ°νž™λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ μš°λ¦¬κ°€ μ˜€λ²„λ‘œλ“œν–ˆκΈ° λ•Œλ¬Έμ— μ‹€μ œλ‘œλŠ” 값을 get ν•˜κ±°λ‚˜ set ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λ‹€μ‹œ μ½”λ“œλ₯Ό μΆ”κ°€ν•©μ‹œλ‹€. get()은 값을 λ°˜ν™˜ ν•  κ²ƒμœΌλ‘œ κΈ°λŒ€ν•˜κ³ , set()은 μ—¬μ „νžˆ 값을 κ°±μ‹  ν•  ν•„μš”κ°€ μžˆμœΌλ―€λ‘œ, ν˜„μž¬μ˜price 값을 μ €μž₯ν•˜κΈ° μœ„ν•΄ internalValue λ³€μˆ˜λ₯Ό μΆ”κ°€ν•©μ‹œλ‹€.

이제 getκ³Ό set이 μ œλŒ€λ‘œ μž‘λ™ν•˜λ―€λ‘œ μ½˜μ†”μ— μ–΄λ–€ λ‚΄μš©μ΄ 좜λ ₯ λ κΉŒμš”?

λ”°λΌμ„œ μš°λ¦¬λŠ” 값을 μ–»κ³  μ„€μ •ν•  λ•Œ 톡보 받을 수 μžˆλŠ” 방법을 가지고 μžˆμŠ΅λ‹ˆλ‹€. 그리고 μž¬κ·€λ₯Ό 톡해 데이터 λ°°μ—΄μ˜ λͺ¨λ“  ν•­λͺ©μ— λŒ€ν•΄ 이 μž‘μ—…μ„ μˆ˜ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

참고둜, Object.keys(data)λŠ” 객체의 ν‚€ 배열을 λ°˜ν™˜ν•©λ‹ˆλ‹€.

μ΄μ œλŠ” λͺ¨λ“  getter와 setterκ°€ 있으며 μ½˜μ†”μ—μ„œ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

πŸ›  κ°œλ…(idea) λͺ¨μœΌκΈ°

μœ„μ™€ 같은 μ½”λ“œκ°€ μ‹€ν–‰λ˜λ©΄ price의 값을 μ–»μŠ΅λ‹ˆλ‹€. priceκ°€ 이 읡λͺ…μ˜ ν•¨μˆ˜ (target)λ₯Ό κΈ°μ–΅ν•˜κ³ μž ν•©λ‹ˆλ‹€. μ΄λŸ°μ‹μœΌλ‘œ priceκ°€ λ³€κ²½λ˜κ±°λ‚˜ set이 μƒˆλ‘œμš΄ κ°’μœΌλ‘œ μ„€μ •λ˜λ©΄ 이 ν•¨μˆ˜λŠ” 이 ν•¨μˆ˜κ°€ μ’…μ†λ˜μ–΄ μžˆλ‹€λŠ” 것을 μ•Œκ³  있기 λ•Œλ¬Έμ— 이 ν•¨μˆ˜κ°€ λ‹€μ‹œ μ‹€ν–‰λ˜λ„λ‘ νŠΈλ¦¬κ±°ν•©λ‹ˆλ‹€. κ·Έλž˜μ„œ μ΄λ ‡κ²Œ 생각할 수 μžˆμŠ΅λ‹ˆλ‹€.

Get => 읡λͺ… ν•¨μˆ˜λ₯Ό κΈ°μ–΅ν•œλ‹€. 값이 λ³€κ²½λ˜λ©΄ λ‹€μ‹œ μ‹€ν–‰ν•œλ‹€.

Set => μ €μž₯된 읡λͺ… ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•˜λ©΄ 값이 λ³€κ²½λœλ‹€.

Dep 클래슀의 경우

Price에 μ ‘κ·Όμ‹œ (get) => dep.depend()λ₯Ό ν˜ΈμΆœν•˜μ—¬ ν˜„μž¬ target을 μ €μž₯ν•œλ‹€.

Price μ„€μ • => dep.notify()λ₯Ό price에 ν˜ΈμΆœν•˜κ³  λͺ¨λ“  target을 λ‹€μ‹œ μ‹€ν–‰ν•œλ‹€.

이 두 가지 κ°œλ…(idea)λ₯Ό κ²°ν•©ν•˜μ—¬ μ΅œμ’… μ½”λ“œλ₯Ό μ‚΄νŽ΄ λ³΄κ² μŠ΅λ‹ˆλ‹€.

앱을 가지고 놀 λ•Œ μ½˜μ†”μ—μ„œ μ–΄λ–€ 일이 μΌμ–΄λ‚˜λŠ”μ§€ λ³΄μ„Έμš”.

μš°λ¦¬κ°€ μ›ν•˜λŠ” λ°”κ°€ ν™•μ‹€νžˆ μ΄λ€„μ§€λ„€μš”! price 와 quantityλŠ” λͺ¨λ‘ λ°˜μ‘ν˜•μž…λ‹ˆλ‹€! λͺ¨λ“  μ½”λ“œλŠ” price λ˜λŠ” quantity 값이 μ—…λ°μ΄νŠΈ 될 λ•Œλ§ˆλ‹€ μž¬μ‹€ν–‰λ©λ‹ˆλ‹€.

Vue λ¬Έμ„œμ˜ 그림이 이제 이해가 λ˜μ‹€κ²λ‹ˆλ‹€.

getter와 setterκ°€ λ“€μ–΄μžˆλŠ” 예쁜 보라색 데이터 동그라미가 λ³΄μ΄μ‹œλ‚˜μš”? μΉœμˆ™ν•΄ 보이셔야 ν•©λ‹ˆλ‹€! λͺ¨λ“  μ»΄ν¬λ„ŒνŠΈ μΈμŠ€ν„΄μŠ€μ—λŠ” getter (빨간색 μ„ )의 쒅속성을 μˆ˜μ§‘ν•˜λŠ” watcher μΈμŠ€ν„΄μŠ€(νŒŒλž€μƒ‰)κ°€ μžˆμŠ΅λ‹ˆλ‹€. λ‚˜μ€‘μ— setterκ°€ 호좜되면 μ»΄ν¬λ„ŒνŠΈκ°€ λ‹€μ‹œ λ Œλ”λ§ λ˜λ„λ‘ ν•˜λŠ” κ°μ‹œμžμ—κ²Œ μ•Œλ¦Όμ„ λ³΄λƒ…λ‹ˆλ‹€. μ•„λž˜λŠ” 제 μ„€λͺ…이 λ“€μ–΄κ°„ μ΄λ―Έμ§€μž…λ‹ˆλ‹€.

μ•Όν˜Έ, 이제 μ’€ 더 λͺ…ν™•ν•΄μ‘Œμ£ ?

Vueκ°€ 컀버 μ•„λž˜μ—μ„œ 이 μž‘μ—…μ„ ν•˜λŠ” 방법은 λΆ„λͺ… 더 λ³΅μž‘ν•˜μ§€λ§Œ, μ΄μ œλŠ” μ—¬λŸ¬λΆ„μ€ 기본적인 것을 μ•Œκ³  μžˆμŠ΅λ‹ˆλ‹€.

βͺ μš°λ¦¬λŠ” 무엇을 λ°°μ› λŠ”κ°€?

  • 쒅속성(dependencies)을 μˆ˜μ§‘ν•˜κ³  (depend) λͺ¨λ“  쒅속성을 λ‹€μ‹œ μ‹€ν–‰ν•˜λŠ” (notify) Dep 클래슀λ₯Ό μž‘μ„±ν•˜λŠ” 방법.

  • μš°λ¦¬κ°€ 싀행쀑인 μ½”λ“œλ₯Ό κ΄€λ¦¬ν•˜κΈ°μœ„ν•œ κ°μ‹œμž(watcher)λ₯Ό λ§Œλ“œλŠ” 방법. μ’…μ†μ„±μœΌλ‘œ μΆ”κ°€ (target) ν•΄μ•Ό ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

  • getter 및 setterλ₯Ό λ§Œλ“€κΈ° μœ„ν•΄ Object.defineProperty()λ₯Ό μ‚¬μš©ν•˜λŠ” 방법.

λ‹€μŒμ€?

이 아티클이 μœ μ΅ν•˜μ…¨λ‹€λ©΄, ν•™μŠ΅ 경둜의 λ‹€μŒ λ‹¨κ³„λŠ” ν”„λ‘μ‹œμ™€ λ°˜μ‘ν˜•μ— λŒ€ν•΄ λ°°μš°λŠ” κ²ƒμž…λ‹ˆλ‹€. VueMastery.comμ—μ„œ 이 μ£Όμ œμ— λŒ€ν•œ λ‚΄ 무료 λΉ„λ””μ˜€λ₯Ό κΌ­ ν™•μΈν•˜μ‹­μ‹œμ˜€. μ—¬κΈ°μ„œ λ‚˜λŠ” Vue.js의 μ°½μ‹œμž Evan You와 ν•΄λ‹Ή μ£Όμ œμ— λŒ€ν•΄ μ΄μ•ΌκΈ°ν•©λ‹ˆλ‹€.


Originally published at www.vuemastery.com


4 Comments
λŒ“κΈ€μ“°κΈ° 폼
Prev 1 2 3 4 5 6 7 Next