[Vue] EventHandler

hyo_oยท2021๋…„ 9์›” 30์ผ
0

๋ฐ๋ธŒ์ฝ”์Šค

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

๐Ÿ“šTIL

day34

list rendering

  • ์ƒํƒœ์œ ์ง€ : ๋ฐ์ดํ„ฐ๋ฅผ ๋ณ€๊ฒฝํ–ˆ์„ ๋•Œ ๋ณ€๊ฒฝ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋ถ€ ๋‹ค DOM์— ๋ฐ˜์˜ํ•˜์—ฌ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ์ตœ์ ํ™” ๊ณผ์ •์„ ๊ฑฐ์นจ
  • ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ : ํ•œ์ชฝ ๋ฐฉํ–ฅ์—์„œ๋งŒ ๋ฐ์ดํ„ฐ๊ฐ€ ์—ฐ๊ฒฐ๋˜๋ฉฐ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์ถœ๋ ฅํ•˜๋Š” ๊ฒƒ๋งŒ ๊ฐ€๋Šฅ
  • ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ : v-model์„ ์‚ฌ์šฉํ•˜์—ฌ ์–‘์ชฝ ๋ฐฉํ–ฅ์—์„œ ๋ฐ์ดํ„ฐ ์—ฐ๊ฒฐ

v-for

  • v-for : ํ•ด๋‹นํ•˜๋Š” ์š”์†Œ๋ฅผ ๋ฐ˜๋ณตํ•˜์—ฌ ๋ฐฐ์—ด ๋ฐ์ดํ„ฐ๋ฅผ ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ์Œ
  • ํ˜„์žฌ ํ•ญ๋ชฉ์— ๋Œ€ํ•œ index ๊ฐ’์„ ๋‘๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ๋ฐ›์„ ์ˆ˜ ์žˆ์Œ
  • v-for๋ฅผ ํ†ตํ•ด ๊ฐ์ฒด ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜๋ณตํ•˜๋ฉด value๊ฐ’์ด ์ถœ๋ ฅ๋จ
  • ๊ฐ์ฒด ์ถœ๋ ฅ์‹œ ๋‘๋ฒˆ์งธ์ธ์ž๋กœ key, ์„ธ๋ฒˆ์งธ ์ธ์ž๋กœ value๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ์Œ
  • ๊ฐ์ฒด๋ฐ์ดํ„ฐ๋Š” ๋ฐ˜๋ณต์‹œ key, value์˜ ์ˆœ์„œ๋ฅผ ๋ณด์žฅํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— index๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ง€ํ–ฅํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Œ
  • v-for์„ ์‚ฌ์šฉํ•  ๋•Œ ๊ณ ์œ ํ•œ key๊ฐ’์„ ๋„ฃ์–ด ์ค˜์•ผ ํ•จ

๋ฐฐ์—ด ๋ณ€๊ฒฝ ๊ฐ์ง€

  • ๋ณ€์ด ๋ฉ”์†Œ๋“œ : Vue๊ฐ€ ๊ฐ์‹œ์ค‘์ธ ๋ฐฐ์—ด์ด ๋ณ€์ด๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฐ˜์‘์„ฑ ์ฒดํฌ๋ฅผ ํ†ตํ•ด ํ™”๋ฉด์„ ๊ฐฑ์‹  - input์š”์†Œ์— ๋ฐ์ดํ„ฐ ์ „๋‹ฌ
  • ๋น„๋ณ€์ด ๋ฉ”์†Œ๋“œ : ๋ณ€์ด๋ฉ”์†Œ๋“œ๋Š” ๋ฉ”์†Œ๋“œ๊ฐ€ ๋ถ™์€ ๋ฐฐ์—ด์„ ์ง์ ‘ ์—…๋ฐ์ดํŠธ ์‹œ์ผœ์ฃผ๋Š” ๋ฐ˜๋ฉด ๋น„๋ณ€์ด ๋ฉ”์†Œ๋“œ๋Š” ์ƒˆ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜
  • ๋ฐฐ์—ด ๊ต์ฒด : vue.js๋Š” ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์ด ํ• ๋‹น๋˜๋”๋ผ๋„ ๊ธฐ๋ณธ์ ์ธ ๊ตฌ์กฐ๋ฅผ ํŒŒ์•…ํ•ด์„œ ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„๋งŒ ๋ Œ๋”๋งํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํšจ์œจ์ 

components & customEvnet

  • components : ์˜ต์…˜์„ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ๋กœ ๋งŒ๋“ค๊ฒŒ๋˜๋ฉด ๊ธฐ๋Šฅ์„ ๋…๋ฆฝ์‹œ์ผœ ์žฌ์‚ฌ์šฉ์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ ์ค‘์š”ํ•œ ๊ธฐ๋Šฅ์„ ์บก์Šํ™”์‹œ์ผœ์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  • ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ ์ปค์Šคํ…€ํ•œ ์ด๋ฒคํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๊ทธ๊ฒƒ์ด ์ปดํฌ๋„ŒํŠธ์—์„œ ์‹คํ–‰๋  ๋•Œ ์–ด๋–ค ๋ฉ”์†Œ๋“œ๋ฅผ ์—ฐ๊ฒฐํ•  ๊ฒƒ์ธ์ง€ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ด๋ฒคํŠธ์™€ ํ•จ๊ป˜ ๋ฐ์ดํ„ฐ๋„ ์ „์†กํ•  ์ˆ˜ ์žˆ์Œ
  • $emit : ์ง€์ •ํ•˜๋Š” ๋ฉ”์†Œ๋“œ์˜ ์ด๋ฆ„๊ณผ ์‹ค์ œ๋กœ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์ด๋ฒคํŠธ์˜ ์ด๋ฆ„๊ณผ ์ผ์น˜์‹œ์ผœ์„œ ๋™์ž‘์‹œํ‚ด

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

  • ์ธ๋ผ์ธ ๋ฉ”์†Œ๋“œ ํ•ธ๋“ค๋Ÿฌ : ๋ฉ”์†Œ๋“œ ์ด๋ฆ„์„ ์ง์ ‘ ๋ฐ”์ธ๋”ฉํ•˜์ง€์•Š๊ณ  ์ธ๋ผ์ธ JS๊ตฌ๋ฌธ์—์„œ ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ
  • ์ธ๋ผ์ธ ๋ฉ”์†Œ๋“œ ํ•ธ๋“ค๋Ÿฌ ์‚ฌ์šฉ์‹œ ์ด๋ฒคํŠธ ๊ฐ์ฒด๊ฐ€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์ˆœ์„œ์— ์ƒ๊ด€์—†์ด $event๋ฅผ ํ†ตํ•ด ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ์Œ
  • ๋ณตํ•ฉ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ : ํ•˜๋‚˜์˜ ์ด๋ฒคํŠธ์— ์—ฌ๋Ÿฌ๊ฐœ์˜ ๋ฉ”์†Œ๋“œ๋ฅผ ์ ์„ ๊ฒฝ์šฐ ์‹คํ–‰๊ธฐํ˜ธ์ธ ()๋ฅผ ๋ถ™์—ฌ์ฃผ๋ฉฐ ,๋‚˜ ;๋ฅผ ํ†ตํ•ด์„œ ๊ตฌ๋ถ„ํ•ด์ค˜์•ผ ํ•จ

event/ key ์ˆ˜์‹์–ด

  • ์ด๋ฒคํŠธ ์ˆ˜์‹์–ด : vue.js์—์„œ ์ด๋ฒคํŠธ ์ˆ˜์‹์–ด๋กœ v-on ์ด๋ฒคํŠธ๋ฅผ ๋” ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ
  • stop, prevent, capture, self, once, passive
  • passive: ์ด๋ฒคํŠธ๋ฅผ ํ†ตํ•ด์„œ ํ™”๋ฉด์˜ ๋ Œ๋”๋ง๊ณผ ๋™์ž‘์˜ ์ฒ˜๋ฆฌ๋ฅผ ๋ถ„๋ฆฌ์‹œ์ผœ์ฃผ๋ฉฐ ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์—์„œ ์ค‘์š”ํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ์˜ต์…˜
  • ํ‚ค ์ˆ˜์‹์–ด : vue.js๊ฐ€ ํ‚ค๋ณด๋“œ ์ด๋ฒคํŠธ์— ์ œ๊ณตํ•˜๋Š” ์ˆ˜์‹์–ด
  • exact : ์—ฐ๊ฒฐ๋˜์–ด์ง„ ํ•ด๋‹น ์ˆ˜์‹์–ด๋งŒ ์ธ์ง€ํ•˜์—ฌ ๋ฉ”์†Œ๋“œ ์‹คํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ •ํ™•ํ•œ ์กฐํ•ฉ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Œ
  • ๋งˆ์šฐ์Šค ๋ฒ„ํŠผ ์ˆ˜์‹์–ด : left, right, middle

html๋กœ ๋œ listener๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

  • v-on, @๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด๋ฒคํŠธ ์š”์†Œ์— ์—ฐ๊ฒฐ์‹œ ์–ป์„ ์ˆ˜ ์žˆ๋Š” ์ด์ 
  • HTML ํ…œํ”Œ๋ฆฟ์„ ๊ฐ„๋‹จํžˆํ•˜์—ฌ JS์ฝ”๋“œ ๋‚ด์—์„œ ํ•ธ๋“ค๋Ÿฌ ํ•จ์ˆ˜ ๊ตฌํ˜„์„ ์ฐพ๋Š” ๊ฒƒ์ด ๋” ์‰ฌ์›Œ์ง
  • ์ด๋Š” ์ œ์–ด๊ด€๋ฆฌ๊ฐ€ ์‰ฌ์›Œ์ง€๊ธฐ ๋•Œ๋ฌธ์— SFC(Single File Components)์—์„œ ํฐ ์žฅ์ ์œผ๋กœ ์ž‘์šฉ
  • JS์—์„œ ์ˆ˜๋™์—ฐ๊ฒฐ ํ•˜์ง€ ์•Š๊ณ  ์š”์†Œ์— ์ง์ ‘ ์ž‘์„ฑํ•˜๊ธฐ ๋•Œ๋ฌธ์— VueModel์€ ์ˆœ์ˆ˜ ๋กœ์ง๊ณผ DOM์„ ํ•„์š”๋กœํ•˜์ง€ ์•Š์Œ
  • ViewModel์ด ํŒŒ๊ธฐ๋  ๊ฒฝ์šฐ ๋ชจ๋“  eventListener๊ฐ€ ์ž๋™์œผ๋กœ ์ œ๊ฑฐ
  • ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•  ๊ฒฝ์šฐ ๊ทธ์— ๋”ฐ๋ฅธ ์ตœ์ ํ™”๋Š” vue์—์„œ ๋‹ด๋‹นํ•˜์—ฌ ์‹คํ–‰

๐ŸŒŠํ•˜๋ฃจ๋ฅผ ๋งˆ์น˜๋ฉฐ

์˜ค๋Š˜ ๊ฐ•์˜๋Š” ์ง€๋‚œ๋ฒˆ์— ๋ฐฐ์› ๋˜ v-for์‹ฌํ™”๋œ ๋‚ด์šฉ๊ณผ Vue์—์„œ event๋ฅผ ๋” ํ™œ์šฉ๋„ ๋†’๊ฒŒ ์“ฐ๋Š” ๊ฒƒ์„ ๋ฐฐ์› ๋‹ค. javascript์—์„œ event๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๋งŽ์ด ์ ‘ํ–ˆ์ง€๋งŒ passive๋ผ๋Š” ์ด๋ฒคํŠธ๋Š” ์ฒ˜์Œ ์•Œ๊ฒŒ๋๋‹ค. ํ™”๋ฉด๊ณผ ๋™์ž‘์„ ๋ถ„๋ฆฌ์‹œ์ผœ์ฃผ๋‹ˆ ์‚ฌ์šฉ์ž๋Š” ์—ฐ์‚ฐ์ด ๋งŽ์ด ๋“œ๋Š” ๋ถ€๋ถ„๋„ ์ธ์ง€ํ•˜์ง€ ์•Š๋„๋ก ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์ด ์ข‹๊ฒŒ ๋Š๊ปด์กŒ๋‹ค. ์‚ฌ์‹ค ์ปดํฌ๋„ŒํŠธ์™€ custom ์ด๋ฒคํŠธ ๋ถ€๋ถ„์ด ์ž˜ ์ดํ•ด๊ฐ€์ง€ ์•Š์•„ ํ•œ๋ฒˆ ๋” ๊ณต๋ถ€ํ•˜๊ณ  ์˜ˆ์ œ๋ฅผ ์ž‘์„ฑํ•  ์ƒ๊ฐ์ด๋‹ค. ์กฐ๊ธˆ์€ ์ต์ˆ™ํ•ด์กŒ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ์•„์ง ๋ฐ์ดํ„ฐ์˜ ์‚ฌ์šฉ์ด ์–ด๋ ต๊ฒŒ ๋Š๊ปด์ง„๋‹ค. ๋” ์ •ํ™•ํžˆ ๊ณต๋ถ€ํ•ด์•ผ๊ฒ ๋‹ค.
๋‚ด์ผ๋ถ€ํ„ฐ css๋Š” ํ„ธ์–ด๋‚ด๊ณ  vue๊ฐ•์˜์— ๋ชฐ๋‘ํ•  ๊ณ„ํš์ด๋‹ค! ๋Šฆ์€๋งŒํผ ๋” ์—ด์‹ฌํžˆ ๊ฐ•์˜๋ฅผ ๋“ค์–ด์•ผ ๊ฒ ๋Œฑ

profile
Front-end Develop๐Ÿฅฐ

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