Vue Mixins

bedakimยท2020๋…„ 3์›” 15์ผ
2
post-thumbnail

๐Ÿงฌ Mixins

vue ๊ณต์‹๋ฌธ์„œ

Mixins๋Š” Vue ์ปดํฌ๋„ŒํŠธ์— ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ธฐ๋Šฅ์„ ๋ฐฐํฌํ•˜๋Š” ์œ ์—ฐํ•œ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. mixin ๊ฐ์ฒด๋Š” ๋ชจ๋“  ๊ตฌ์„ฑ ์š”์†Œ ์˜ต์…˜์„ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ์— mixin์„ ์‚ฌ์šฉํ•˜๋ฉด ํ•ด๋‹น mixin์˜ ๋ชจ๋“  ์˜ต์…˜์ด ์ปดํฌ๋„ŒํŠธ์˜ ๊ณ ์œ  ์˜ต์…˜์— โ€œํ˜ผํ•ฉโ€๋ฉ๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ์˜ ๊ณ ์œ  ์˜ต์…˜์— โ€œํ˜ผํ•ฉโ€?

์šฐ์„  ๊ฐ„๋‹จํžˆ ์‚ฌ์šฉํ•ด ๋ณด์ž๋ฉด

  • mixin ๊ฐ์ฒด ์ƒ์„ฑํ›„
  • mixin์„ ์‚ฌ์šฉํ•  ์ปดํฌ๋„ŒํŠธ์— ์ •์˜

๋™์ผํ•œ ์ด๋ฆ„์„ ๊ฐ€์ง„ ๋ผ์ดํ”„ ์‚ฌ์ดํด ํ›… ํ•จ์ˆ˜๋Š” ๋ฐฐ์—ด๋กœ ํ•ฉ์ณ์ ธ ๋ชจ๋‘ ํ˜ธ์ถœ๋˜๋Š”๋ฐ

  • mixin์˜ ํ›… ํ•จ์ˆ˜๊ฐ€ ๋จผ์ € ํ˜ธ์ถœ ๋˜๊ณ , ๊ทธ ํ›„ ์ปดํฌ๋„ŒํŠธ์˜ ํ›… ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ ๋œ๋‹ค.
  • ๊ทธ๋Ÿผ ๋™์ผํ•œ ๋ฉ”์†Œ๋“œ ๊ฐ€์žˆ๋Š” ๊ฒฝ์šฐ์—”?

์•ž์„œ ์ •์˜๋œ ๋ผ์ดํ”„ ์‚ฌ์ดํด ํ›… ๋ชจ๋‘ ํ˜ธ์ถœ๋˜๋Š” ๊ฒƒ๊ณผ ๋‹ฌ๋ฆฌ ๋ฉ”์†Œ๋“œ์˜ ๊ฒฝ์šฐ ๋ฎ์–ด์“ฐ๊ฒŒ ๋œ๋‹ค.

์ฆ‰ mixinํ•˜๋Š” ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋™์ผํ•œ ํ•จ์ˆ˜๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ,
๋ฐฐ์—ด ์ˆœ์„œ ์ƒ ๋‚˜์ค‘์— ๋“ฑ๋ก๋œ ์ปดํฌ๋„ŒํŠธ์˜ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค.

๋”ฐ๋ผ์„œ ๋ฏน์Šค์ธ์„ ์ค‘์ฒฉํ•ด์„œ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ•  ๊ฒฝ์šฐ์—๋Š” ๋ผ์ดํ”„ ์‚ฌ์ดํด ํ›… ์ด๋ฒคํŠธ๋ฅผ ํ™œ์šฉํ•ด ์‚ฌ์šฉํ•˜๋ฉด ๐Ÿ‘Œ

๐Ÿ–‹ ์ •๋ฆฌ

  • ๊ฐ ์ปดํฌ๋„ŒํŠธ๋Š” mixin ์„ ํ†ตํ•ด ๋™์ผํ•œ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ๋‹ค(์ฝ”๋“œ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅ์„ฑโฌ†).
  • ๊ธฐ๋Šฅ์„ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ๊ณต์œ ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ์ƒ์†์„ ๋ฐ›๋Š” ๊ฐœ๋…์ด๋‹ค.
  • ๊ฐ ์ปดํฌ๋„ŒํŠธ๋Š” ์‹ ๋ขฐํ•  ์ˆ˜ ์žˆ๋Š” ๋™์ž‘์„ ๋ณด์žฅ ๋ฐ›๋Š”๋‹ค.
  • ์˜ค๋ฒ„๋ผ์ด๋”ฉ ๊ธฐ๋Šฅ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด ์ปค์Šคํ…€ ๋ฐ ํ™•์žฅ์— ์šฉ์ดํ•˜๋‹ค.
profile
์ขŒ์ถฉ์šฐ๋Œ ์šฐ๋‹นํƒ•ํƒ• ํ—˜๋‚œํ•œ ๊ฐœ๋ฐœ ์—ฌ์ •๊ธฐ

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