๐Ÿ’ป VueJS ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง

waterglassesยท2022๋…„ 5์›” 10์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
23/50
post-thumbnail

์ด๋ฒˆ ์ฑ•ํ„ฐ๋Š” Vuejs์˜ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง์— ๋Œ€ํ•ด ๋‹ค๋ฃจ์—ˆ์Šต๋‹ˆ๋‹ค.
โš ๏ธ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์€ ์˜คํƒ€๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๐Ÿ“ƒ ์˜ค๋Š˜ ๊ณต๋ถ€ํ•œ ๊ฒƒ

์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง

์ด๋ฒคํŠธ ์ฒญ์ทจ

v-on ์€ @๊ธฐํ˜ธ๋กœ ์ค„์—ฌ์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ฉ”์†Œ๋“œ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์™€ ์ธ๋ผ์ธ ๋ฉ”์†Œ๋“œ ํ•ธ๋“ค๋Ÿฌ
ํ˜ธ์ถœํ•˜๊ณ ์ž ํ•˜๋Š” ๋ฉ”์†Œ๋“œ ์ด๋ฆ„์„ ๋ฐ›์•„ ์ด๋ฒคํŠธ๋ฅผ ํ˜ธ์ถœํ•˜๊ฑฐ๋‚˜ ์ธ๋ผ์ธ JS ๊ตฌ๋ฌธ์— ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

<!-- vue3 ์˜ˆ์ œ -->
<div id="event-with-method">
  <button @click="greet">Greet</button>
  <button @click="say('hi')">Say hi</button>
</div>

Vue.createApp({
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    greet(event) {
      if (event) {
        alert(event.target.tagName)
      }
    },
    say(message) {
      alert(message)
    }
  }
}).mount('#event-with-method')

๋ณตํ•ฉ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ
,๋กœ ์ด๋ฒคํŠธ๋ฅผ ์—ฌ๋Ÿฌ๊ฐœ ์ง€์ •ํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<!-- vue3 ์˜ˆ์ œ -->
<button @click="one($event), two($event)">
  Submit
</button>

์ด๋ฒคํŠธ ์ˆ˜์‹์–ด
์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ๋‚ด๋ถ€์—์„œ event.preventDefault() ๋˜๋Š” event.stopPropagation() ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ์ผ์€ ๋นˆ๋ฒˆํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ v-on์ด๋ฒคํŠธ์— ์ด๋ฒคํŠธ ์ˆ˜์‹์–ด๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

<!-- vue3 ์˜ˆ์ œ -->
<!-- ํด๋ฆญ ์ด๋ฒคํŠธ ์ „ํŒŒ๊ฐ€ ์ค‘๋‹จ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. -->
<a @click.stop="doThis"></a>

<!-- ์ œ์ถœ ์ด๋ฒคํŠธ๊ฐ€ ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋กœ๋“œํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. -->
<form @submit.prevent="onSubmit"></form>

<!-- ์ˆ˜์ •์ž๋Š” ์ฒด์ด๋‹์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. -->
<a @click.stop.prevent="doThat"></a>

<!-- ๋‹จ์ˆœํžˆ ์ˆ˜์‹์–ด๋งŒ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. -->
<form @submit.prevent></form>

<!-- ์บก์ฒ˜ ๋ชจ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.-->
<!--์ฆ‰, ๋‚ด๋ถ€ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋Œ€์ƒ์œผ๋กœ ํ•˜๋Š” ์ด๋ฒคํŠธ๊ฐ€ ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ์—์„œ ์ฒ˜๋ฆฌ๋˜๊ธฐ ์ „์— ์—ฌ๊ธฐ์„œ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค. -->
<div @click.capture="doThis">...</div>

<!-- event.target์ด ์—˜๋ฆฌ๋จผํŠธ ์ž์ฒด์ธ ๊ฒฝ์šฐ์—๋งŒ ํŠธ๋ฆฌ๊ฑฐ๋ฅผ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.-->
<!-- ์ž์‹ ์—˜๋ฆฌ๋จผํŠธ์—์„œ๋Š” ์ฒ˜๋ฆฌ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.-->
<div @click.self="doThat">...</div>

ํ‚ค ์ˆ˜์‹์–ด
ํ‚ค๋ณด๋“œ ์ด๋ฒคํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<!-- ํ‚ค๊ฐ€ 'Enter'์ผ๋•Œ๋งŒ `vm.submit()`์„ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.-->
<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />
<!-- ์•ŒํŠธ + ์—”ํ„ฐ -->
<input @keyup.alt.enter="clear" />

.exact ์ˆ˜์‹์–ด
๋‹ค๋ฅธ ์‹œ์Šคํ…œ ์ˆ˜์‹์–ด์™€ ์กฐํ•ฉํ•ด ๊ทธ ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์œ„ํ•ด ์ •ํ™•ํ•œ ์กฐํ•ฉ์ด ๋ˆŒ๋Ÿฌ์•ผํ•˜๋Š” ๊ฒƒ์„ ์š”๊ตฌํ•œ๋‹ค.

<!-- ์•„๋ž˜์ฝ”๋“œ๋Š” Alt ๋˜๋Š” Shift์™€ ํ•จ๊ป˜ ๋ˆŒ๋ €์„ ๋•Œ๋„ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.-->
<button @click.ctrl="onClick">A</button>
<!-- ์•„๋ž˜์ฝ”๋“œ๋Š” Ctrlํ‚ค๋งŒ ๋ˆŒ๋ ค์ ธ ์žˆ์„ ๋•Œ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.-->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- ์•„๋ž˜ ์ฝ”๋“œ๋Š” ์‹œ์Šคํ…œ ํ‚ค๊ฐ€ ๋ˆŒ๋ฆฌ์ง€ ์•Š์€ ์ƒํƒœ์ธ ๊ฒฝ์šฐ์—๋งŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.-->
<button @click.exact="onClick">A</button>

์™œ HTML๋กœ ๋œ ๋ฆฌ์Šค๋„ˆ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๊ฐ€?

์ •๋ง ์ค‘์š”ํ•œ ์งˆ๋ฌธ์ด๋‹ค.
์ด ์ด์œ ๋Š” ์šฐ์„  html ํ…œํ”Œ๋ฆฟ์„ ๊ฐ„๋‹จํžˆ ํ•ด js ์•ˆ์—์„œ ํ•จ์ˆ˜๋ฅผ ์ฐพ๊ธฐ๊ฐ€ ํŽธํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๊ณ  ํ…Œ์ŠคํŠธ๊ฐ€ ํŽธํ•ด์ง€๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๋งˆ์ง€๋ง‰์œผ๋กœ ViewModel์ด ํŒŒ๊ธฐ๋˜๋ฉด ๋ชจ๋“  ์ด๋ฒคํŠธ ๋ฆฌ์Šคํ„ฐ๊ฐ€ ์ž๋™์œผ๋กœ ์ œ๊ฑฐ๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค!

๋” ๋ฐฐ์šด ๋‚ด์šฉ

  • ๋ฆฌ์ŠคํŠธ ๋ Œ๋”๋ง
  • ํผ ์ž…๋ ฅ ๋ฐ”์ธ๋”ฉ

๐Ÿ”ฅ ๋Š๋‚€์ 

๋ฆฌ์ŠคํŠธ ๋ Œ๋”๋ง์„ ๋ฐฐ์šธ ๋•Œ v-for๊ณผ v-if ๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์„ ๋ฐฐ์› ๋‹ค. ์ž‘๋…„ vue๋ฅผ ์ ‘ํ•  ๋•Œ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋œ๋‹ค๋Š” ๊ฒƒ์€ ์•Œ๊ณ  ์žˆ์—ˆ์ง€๋งŒ ์™œ ์•ˆ๋˜๋Š”์ง€๋Š” ์‚ดํŽด๋ณด์ง€ ์•Š์•˜์—ˆ๋‹ค. ๋™์ผํ•œ ๋…ธ๋“œ์— ์žˆ์œผ๋ฉด v-if๋Š” v-for๋ณด๋‹ค ์šฐ์„  ์ˆœ์œ„๊ฐ€ ๋†’์•„ v-if ์กฐ๊ฑด์€ v-for ๋ฒ”์œ„์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ, ์ด ๋ถ€๋ถ„์„ ๊นจ๋‹ซ๊ฒŒ ๋˜์—ˆ๋‹ค.

ํ•ญ์ƒ ๊ณต๋ถ€๋ฅผ ํ•  ๋•Œ ๊ทธ๋ ‡๊ตฌ๋‚˜ ํ•˜๊ณ  ๋„˜์–ด๊ฐ€์ง€ ๋ง๊ณ  ์™œ ์ด๋Ÿฐ ๊ฐœ๋…์ด ๋‚˜์™”๋Š”์ง€, ์›์ธ์— ๋Œ€ํ•ด์„œ ์ดํ•ดํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ์— ๋Œ€ํ•ด์„œ๋„ ์•Œ๋ฉด์„œ ๊ณต๋ถ€ํ•ด์•ผ๊ฒ ๋‹ค.

๋ญ๋“ ์ง€ ์ƒˆ๋กœ์šด ๊ฒƒ์„ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์€ ์ฆ๊ฒ๋‹ค๐Ÿ‘๐Ÿป

Refer

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค
Vue - ์ด๋ฒคํŠธํ•ธ๋“ค๋ง

์ •๋ฆฌ

Day36

profile
๋งค ์ˆœ๊ฐ„ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€