์ œ์ด์ฟผ๋ฆฌ์—์„œ ๋ทฐ ์‚ฌ๊ณ  ๋ฐฉ์‹์œผ๋กœ ์ „ํ™˜ํ•˜๊ธฐ

๋ทฐ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋งˆ์ฃผํ•˜๋Š” ํ˜„์‹ค

์ œ์ด์ฟผ๋ฆฌ(jQuery)๋Š” ํ˜„์žฌ๊นŒ์ง€๋„ ๋งŽ์€ ๊ธฐ์—…๋“ค์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์•„๋งˆ๋„ ๋ทฐ๋ฅผ ๋ฐฐ์šฐ๊ณ  ๋‚˜๋ฉด ๊ฐ€์žฅ ๋จผ์ € ๋ถ€๋”ชํžˆ๋Š” ์ผ๋“ค์ด ์ œ์ด์ฟผ๋ฆฌ๋กœ ์ œ์ž‘๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ธฐ๋Šฅ์„ ์ˆ˜์ •ํ•ด์•ผ ํ•˜๋Š” ์ผ ์ผ๊ฒ๋‹ˆ๋‹ค.

jQuery๋Š” DOM์„ ์‰ฝ๊ฒŒ ์กฐ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

์ œ์ด์ฟผ๋ฆฌ์™€ ๋ทฐ์˜ ์ฐจ์ด์ 

์ œ์ด์ฟผ๋ฆฌ์™€ ๋ทฐ์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ ํ™”๋ฉด ์š”์†Œ๋ฅผ ์ง์ ‘ ์ ‘๊ทผํ•˜๋Š๋ƒ ๊ทธ๋ ‡์ง€ ์•Š๋Š๋ƒ์ž…๋‹ˆ๋‹ค. ๋” ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด ๋‘ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ DOM ์ ‘๊ทผ ๋ฐฉ๋ฒ•์„ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. HTML ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๊ฐ„๋‹จํ•œ ๋ฒ„ํŠผ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

<button>click me</button>

์ œ์ด์ฟผ๋ฆฌ์˜ ๋ฒ„ํŠผ ํƒœ๊ทธ ์ ‘๊ทผ

์ œ์ด์ฟผ๋ฆฌ๋Š” ํŠน์ • ํƒœ๊ทธ๋ฅผ ์ ‘๊ทผํ•˜๊ธฐ ์ผ๋ฐ˜์ ์œผ๋กœ ํƒœ๊ทธ์— id ์†์„ฑ์„ ๋ถ€์—ฌํ•˜๊ณ  ์ œ์ด์ฟผ๋ฆฌ ์„ ํƒ์ž($)๋ฅผ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค.

<button id="btn">click me</button>
$('#btn');

์œ„ ์ฝ”๋“œ๋Š” btn ์•„์ด๋””๋ฅผ ๊ฐ€์ง€๋Š” DOM์„ ์ ‘๊ทผํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

๋ทฐ์˜ ๋ฒ„ํŠผ ํƒœ๊ทธ ์ ‘๊ทผ

์ด๋ฒˆ์—” ๋ทฐ์ž…๋‹ˆ๋‹ค. ๋ทฐ๋กœ ํŠน์ • ํƒœ๊ทธ๋กœ ์ ‘๊ทผํ•˜๋ ค๋ฉด ref ์†์„ฑ์„ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค. ์œ„์˜ ๋ฒ„ํŠผ ํƒœ๊ทธ์— ref ์†์„ฑ์„ ๋ถ€์—ฌํ•˜๊ณ  ์ ‘๊ทผํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<button ref="btn">click me</button>
this.$refs.btn

์ด์ฒ˜๋Ÿผ ๋ฐ”๋กœ ์ ‘๊ทผํ•˜๊ณ  ์‹ถ์€ ํƒœ๊ทธ์— ref ์†์„ฑ์„ ์ง€์ •ํ•˜์—ฌ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์ œ์ด์ฟผ๋ฆฌ์™€ ๋ทฐ๋ฅผ ๊ฐ™์ด ์“ธ ๋•Œ ์ฃผ์˜ํ•  ์ 

๋ณดํ†ต ๋ทฐ๋ฅผ ๋ฐฐ์šฐ์‹œ๊ณ  ๋‚˜๋ฉด ๊ธฐ์กด์˜ ์ œ์ด์ฟผ๋ฆฌ ๊ธฐ๋ฐ˜ ์‹œ์Šคํ…œ์„ ๊ฐœํŽธํ•˜๊ฑฐ๋‚˜ ์ƒˆ๋กœ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์ „์ž์˜ ๋น„์œจ์ด ์ƒ๋‹นํžˆ ๋†’์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์ œ์ด์ฟผ๋ฆฌ ๊ธฐ๋ฐ˜์˜ ์ฝ”๋“œ, ํ”Œ๋Ÿฌ๊ทธ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ์‹œ์— ์ฃผ์˜ํ•  ์ ์„ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ฃผ์˜ํ•  ์ ์€ ๋ฐ”๋กœ ๋ทฐ์˜ ์ธ์Šคํ„ด์Šค ๋ผ์ดํ”„ ์‚ฌ์ดํด์ž…๋‹ˆ๋‹ค.

๋ทฐ์˜ ๋ผ์ดํ”„ ์‚ฌ์ดํด์ด๋ž€ ๋ทฐ์˜ ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋˜๊ณ  ์†Œ๋ฉธ๋˜๊ธฐ๊นŒ์ง€์˜ ๊ณผ์ •์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ผ์ดํ”„ ์‚ฌ์ดํด ํ›…์ด๋ผ๋Š” ๊ฒŒ ์žˆ๋Š”๋ฐ ์ฃผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๊ฑด ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • created
  • beforeMount
  • mounted

์—ฌ๊ธฐ์„œ ์ œ์ด์ฟผ๋ฆฌ์˜ ์„ ํƒ์ž๋กœ HTML ํƒœ๊ทธ๋ฅผ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ์‹œ์ ์€ mounted ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค. ์ฝ”๋“œ๋กœ ์˜ˆ๋ฅผ ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<template>
  <div>
    <button id="btn">click me</button>
  </div>
</template>

<script>
import $ from 'jquery';

export default {
  mounted() {
    $('#btn').click(function() {
      alert('hi');
    });
  }
}
</script>

์œ„ ์ฝ”๋“œ๋Š” ๋ทฐ์˜ ์‹ฑ๊ธ€ ํŒŒ์ผ ์ปดํฌ๋„ŒํŠธ(vue ํŒŒ์ผ ํ™•์žฅ์ž) ์ฝ”๋“œ ๊ตฌ์กฐ์—์„œ ์ œ์ด์ฟผ๋ฆฌ๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ์Šต์ž…๋‹ˆ๋‹ค. <template> ์•ˆ์— HTML ํƒœ๊ทธ๊ฐ€ ์žˆ์œผ๋‹ˆ ์ œ์ด์ฟผ๋ฆฌ๋กœ ํ•ญ์ƒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์ง€๋งŒ ์‹ค์ œ๋กœ๋Š” ๊ทธ๋ ‡์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด <template>์€ ์‹ค์ œ ๋”์œผ๋กœ ๋ณ€ํ™˜๋˜๊ธฐ ์ „์˜ Virtual DOM ์ƒํƒœ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ ์ ˆํ•œ ๋ผ์ดํ”„ ์‚ฌ์ดํด ํ›…์—์„œ ์ ‘๊ทผํ•˜์ง€ ์•Š์œผ๋ฉด ์ ‘๊ทผํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ์œ„์˜ ์ฝ”๋“œ๋Š” ๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ hi๋ผ๋Š” ๊ฒฝ๊ณ ์ฐฝ์„ ๋„์šฐ์ง€๋งŒ ์•„๋ž˜์˜ ์ฝ”๋“œ๋Š” ์•„๋ฌด๋Ÿฐ ๋ฐ˜์‘์ด ์—†์Šต๋‹ˆ๋‹ค.

<template>
  <div>
    <button id="btn">click me</button>
  </div>
</template>

<script>
import $ from 'jquery';

export default {
  created() {
    $('#btn').click(function() {
      alert('hi');
    });
  }
}
</script>