computed 속성

μ»΄ν“¨ν‹°λ“œ(computed) 속성은 ν…œν”Œλ¦Ώμ˜ 데이터 ν‘œν˜„μ„ 더 직관적이고 κ°„κ²°ν•˜κ²Œ λ„μ™€μ£ΌλŠ” μ†μ„±μž…λ‹ˆλ‹€. λ°”λ‘œ μ½”λ“œλ₯Ό λ³΄κ² μŠ΅λ‹ˆλ‹€.

computed 속성 μ˜ˆμ‹œ

<div>{{ message.split('').reverse().join('') }}</div>

μœ„ μ½”λ“œλŠ” messageλΌλŠ” 데이터 μ†μ„±μ˜ λ¬Έμžμ—΄ μˆœμ„œλ₯Ό μ—­μœΌλ‘œ λ³€ν™˜ν•΄μ£ΌλŠ” μ½”λ“œμž…λ‹ˆλ‹€. message 값이 λ§Œμ•½ Hello라면 화면에 좜λ ₯λ˜λŠ” 값은 olleHμž…λ‹ˆλ‹€. 이처럼 μ½§μˆ˜μ—Ό κ΄„ν˜Έ μ•ˆμ—λŠ” λ‹¨μˆœνžˆ 데이터 μ†μ„±μ˜ κ°’λ§Œ ν‘œμ‹œν•˜λŠ”κ²Œ μ•„λ‹ˆλΌ μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λ‚΄μž₯ APIλ₯Ό ν™œμš©ν•˜μ—¬ μ–΄λŠ 정도 가곡할 수 μžˆμŠ΅λ‹ˆλ‹€.

이와 같은 계산식이 ν…œν”Œλ¦Ώμ— λ§Žμ•„μ§€λ©΄ ν…œν”Œλ¦Ώμ˜ 가독성이 ν˜„μ €νžˆ λ–¨μ–΄μ§‘λ‹ˆλ‹€. λ”°λΌμ„œ μ•„λž˜μ™€ 같이 computed 속성을 ν™œμš©ν•΄μ•Ό ν•©λ‹ˆλ‹€.

computed: {
  reverseMessage() {
    return this.message.split('').reverse().join('');
  }
}

λ¬Έμžμ—΄μ„ μ—­μœΌλ‘œ λ³€ν™˜ν•˜λŠ” λ‘œμ§μ„ μ»΄ν“¨ν‹°λ“œ 속성에 μ •μ˜ν–ˆκΈ° λ•Œλ¬Έμ— μ΅œμ’…μ μœΌλ‘œ ν™”λ©΄μ—λŠ” μ•„λž˜μ™€ 같이 κ΅¬ν˜„ν•˜λ©΄ λ©λ‹ˆλ‹€.

<div>{{ reverseMessage }}</div>

computed μ†μ„±μ˜ μž₯점

μ»΄ν“¨ν‹°λ“œ 속성은 λ‹¨μˆœνžˆ λ·° ν…œν”Œλ¦Ώ μ½”λ“œμ˜ κ°€λ…μ„±λ§Œ 높여쀄 뿐만 μ•„λ‹ˆλΌ μ»΄ν“¨ν‹°λ“œ μ†μ„±μ˜ λŒ€μƒμœΌλ‘œ μ •ν•œ data 속성이 λ³€ν–ˆμ„ λ•Œ 이λ₯Ό κ°μ§€ν•˜κ³  μžλ™μœΌλ‘œ λ‹€μ‹œ μ—°μ‚°ν•΄μ£ΌλŠ” μž₯점이 μžˆμŠ΅λ‹ˆλ‹€.

μ•žμ—μ„œ μ‚΄νŽ΄λ³Έ μ½”λ“œμ—μ„œ message 값을 Hello Vue.js둜 λ°”κΎΈλŠ” μˆœκ°„ μ»΄ν“¨ν‹°λ“œ 속성이 λ‹€μ‹œ 연산을 ν•΄μ„œ 화면에 sj.euV olleHλ₯Ό ν‘œμ‹œν•΄μ€λ‹ˆλ‹€. ν•œλ²ˆ message 값을 변경해보고 λ‹€μ‹œ 화면을 κ°±μ‹ ν•΄μ£ΌλŠ”μ§€ 직접 ν™•μΈν•΄λ³΄μ„Έμš”.

computed 속성 μ£Όμ˜μ‚¬ν•­

μ»΄ν“¨ν‹°λ“œ 속성을 μ‚¬μš©ν•  λ•Œ μ£Όμ˜ν•  사항은 λ‹€μŒ 2κ°€μ§€μž…λ‹ˆλ‹€.

  1. μ»΄ν“¨ν‹°λ“œ 속성은 인자λ₯Ό 받지 μ•ŠλŠ”λ‹€.
  2. HTTP 톡신과 같이 μ»΄ν“¨νŒ… λ¦¬μ†ŒμŠ€κ°€ 많이 ν•„μš”ν•œ λ‘œμ§μ„ μ •μ˜ν•˜μ§€ μ•ŠλŠ”λ‹€.

1. 인자λ₯Ό 받지 μ•ŠλŠ” computed

μ»΄ν“¨ν‹°λ“œμ˜ μ‚¬μš©λ²•μ„ 읡히고 λ‚˜μ„œ 화면을 κ΅¬ν˜„ν•˜λ‹€κ°€ 보면 μžμ—°μŠ€λŸ½κ²Œ μ•„λž˜μ™€ 같은 μ‹œλ„λ₯Ό ν•˜κ²Œ λ©λ‹ˆλ‹€.

<div>{{ reverseMessage(false) }}</div>
computed: {
  reverseMessage(isReversed) {
    return isReversed ? this.message.split('').reverse().join('') : this.message;
  }
}

μœ„μ˜ μ½”λ“œλŠ” μ •μƒμ μœΌλ‘œ λ™μž‘ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. ν…œν”Œλ¦Ώμ— μ„ μ–Έν•œ μ»΄ν“¨ν‹°λ“œ 속성에 κ΄„ν˜Έκ°€ μƒκΈ°λŠ” μˆœκ°„ ν•΄λ‹Ή ν…œν”Œλ¦Ώμ„ μ‹€μ œ DOM으둜 λ³€ν™˜ν•  λ•Œ λΌμ΄λΈŒλŸ¬λ¦¬μ—μ„œ μ—λŸ¬λ₯Ό λ°œμƒμ‹œν‚΅λ‹ˆλ‹€.

2. HTTP 톡신 μ½”λ“œλ₯Ό μ œμ™Έν•˜λŠ” computed

ν”νžˆ 저지λ₯΄λŠ” 또 λ‹€λ₯Έ μ‹€μˆ˜λŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

data: {
  message: ''
},
computed: {
  reverseMessage() {
    var vm = this;
    axios.get('/message').then(function(response) {
      vm.message = response.data;
    });
    return this.message.split('').reverse().join('');
  }
}

μ»΄ν“¨ν‹°λ“œ 속성에 HTTP μš”μ²­κ³Ό 같은 λΉ„μ‹Ό λΉ„μš©μ˜ μ½”λ“œλ₯Ό λ„£λŠ” κ²½μš°κ°€ μžˆμŠ΅λ‹ˆλ‹€. 기본적으둜 μ»΄ν“¨ν‹°λ“œ 속성은 ν…œν”Œλ¦Ώ μ½”λ“œμ˜ 가독성을 μœ„ν•œ κΈ°λŠ₯이며 HTTP 톡신과 같이 λΈŒλΌμš°μ € λ¦¬μ†ŒμŠ€κ°€ 많이 ν• μ• λ˜λŠ” μ½”λ“œλ“€μ€ watchλ‚˜ methods에 λ„£λŠ” 것이 μ ν•©ν•©λ‹ˆλ‹€.