๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
[๊ฐœ๋ฐœ] Practice/Vue.js

[Vue.js] v-if ์™€ ๋ชจ๋‹ฌ์ฐฝ ๋งŒ๋“ค๊ธฐ

by Connecting-the-dots 2022. 4. 1.
728x90
๋ฐ˜์‘ํ˜•

๐Ÿ’ก ์‹ค์Šต ํฌ์ธํŠธ!

  • ์˜ค๋Š˜์€ ๋ชจ๋‹ฌ์ฐฝ UI ์™€ ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค์–ด๋ณด์•˜๋‹ค.
  • ์ด๋ฏธ ๋ชจ๋‹ฌ์ฐฝ UI ์™€ ๊ด€๋ จํ•ด์„œ๋Š” JavaScript ๋‚˜ React ๋กœ๋„ ๋งŽ์ด ๋งŒ๋“ค์–ด๋ดค๊ธฐ ๋•Œ๋ฌธ์— ๋งŒ๋“œ๋Š” ๊ณผ์ •๋งŒ ์ž˜ ๊ธฐ์–ตํ•˜๊ณ  ์žˆ์œผ๋ฉด ๋ฌธ๋ฒ•๋งŒ ์กฐ๊ธˆ์”ฉ ๋ฐ”๊ฟ”์ฃผ๋ฉด ๋˜์–ด ์–ด๋ ค์šด ์ ์€ ์—†์—ˆ๋‹ค.
  • ๊ทธ๋ž˜์„œ ์ƒํ’ˆ๋ช…์„ ํด๋ฆญํ•˜๋ฉด ๋ชจ๋‹ฌ์ฐฝ UI ๋ฅผ ๋„์šฐ๊ณ , ๋ชจ๋‹ฌ์ฐฝ ๋‚ด์—์„œ ๋‹ซ๊ธฐ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ๋ชจ๋‹ฌ์ฐฝ UI ๋ฅผ ์ˆจ๊ธฐ๋Š” ๊ฒƒ์— ๊ทธ์น˜์ง€ ์•Š๊ณ  ๊ตฌ๊ธ€๋ง์„ ํ†ตํ•ด ์–ด๋‘์šด ๋ฐฐ๊ฒฝ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ์—๋„ ๋ชจ๋‹ฌ์ฐฝ์ด ๋‹ซํž ์ˆ˜ ์žˆ๋„๋ก ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•ด์ฃผ์—ˆ๋‹ค.
  • ์ฒ˜์Œ์— ์‹œ๋„๋ฅผ ํ–ˆ์„ ๋•Œ์—๋Š” ๋‹ซ๊ธฐ ๋ฒ„ํŠผ๊ณผ ๋ชจ๋‹ฌ์ฐฝ์˜ ํ•˜์–€ ๋ฐฐ๊ฒฝ๋งŒ ํด๋ฆญํ•ด๋ด์„œ ์ž˜ ๋˜๋Š” ์ค„ ์•Œ์•˜๋Š”๋ฐ, ์ด๊ฒƒ์ €๊ฒƒ ๋ˆ„๋ฅด๋‹ค๋ณด๋‹ˆ ์ฝ”๋“œ๋ฅผ ์ž˜๋ชป ์ž‘์„ฑํ–ˆ๋Š”์ง€ ๋ชจ๋‹ฌ์ฐฝ ๋‚ด์˜ ๋‚ด์šฉ์„ ํด๋ฆญํ•˜๋ฉด ๋ชจ๋‹ฌ์ฐฝ์ด ๋‹ซํ˜€๋ฒ„๋ฆฌ๋Š” ๊ฒฝ์šฐ๋„ ๋ฐœ์ƒํ•ด์„œ ๋‹นํ™ฉ์Šค๋Ÿฌ์› ์ง€๋งŒ ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ์ž‘์„ฑํ•ด์„œ ์ด์ œ๋Š” ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ’œ ๋“ค์–ด๊ฐ€๊ธฐ ์ „์—

  • ์˜ค๋Š˜์€ ์ƒํ’ˆ๋ช…์„ ํด๋ฆญํ•˜๋ฉด ์ƒ์„ธ ํŽ˜์ด์ง€๊ฐ€ ๋ชจ๋‹ฌ์ฐฝ์˜ ํ˜•ํƒœ๋กœ ๋œจ๋„๋ก ๋งŒ๋“ค์–ด๋ณด์•˜๋‹ค.
  • ๋ชจ๋‹ฌ์ฐฝ์ด๋ž€ ์œ„์™€ ๊ฐ™์ด ๊ธฐ์กด ํŽ˜์ด์ง€๊ฐ€ ์–ด๋‘ก๊ฒŒ ๋ฐฐ๊ฒฝ์ฒ˜๋Ÿผ ๋ฐ”๋€Œ๊ณ  ๊ทธ ์œ„์— ํ•˜์–€ ์ฐฝ์ด ๋ณด์ด๋Š” UI ๋ฅผ ๋งํ•œ๋‹ค.

 

  • Vue ๋กœ ๋ชจ๋‹ฌ์ฐฝ๊ณผ ๊ฐ™์ด ๋™์ ์ธ UI ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.
    • ๋จผ์ € HTML UI ๋ ˆ์ด์•„์›ƒ์„ html ๋ฐ css ๋กœ ์ž‘์„ฑํ•˜์—ฌ ๋””์ž์ธํ•œ๋‹ค.
    • ๋งŒ๋“  HTML UI ์˜ ์ƒํƒœ๋ฅผ ๋ฐ์ดํ„ฐ๋กœ ์ €์žฅํ•ด๋‘”๋‹ค.
      (์˜ˆ๋ฅผ ๋“ค์–ด ๋ชจ๋‹ฌ์ฐฝ์ด ๋ณด์ด๋Š” ์ƒํƒœ๋Š” true, ์•ˆ ๋ณด์ด๋Š” ์ƒํƒœ๋Š” false!)
    • HTML UI ๋ฅผ ์–ธ์ œ ๋ณด์—ฌ์ฃผ๊ณ  ์–ธ์ œ ๋ณด์—ฌ์ฃผ์ง€ ์•Š์„์ง€๋ฅผ Vue ๋ฌธ๋ฒ•์„ ์ด์šฉํ•ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค.

๐Ÿ’œ Vue ๋กœ ๋งŒ๋“œ๋Š” ํ”„๋กœ์ ํŠธ์— ์ด๋ฏธ์ง€ ๋„ฃ๊ธฐ

<img src='./์ด๋ฏธ์ง€๊ฒฝ๋กœ'>
  • ์ด๋ฏธ์ง€๋ฅผ src ํด๋” ์•ˆ์— ๊ทธ๋ƒฅ ๋„ฃ๋“ ์ง€, ํ•˜์œ„ ํด๋”๋ฅผ ์ƒ์„ฑํ•ด์„œ ๋„ฃ๋“ ์ง€ ์›ํ•˜๋Š” ๋ฐฉ์‹๋Œ€๋กœ ๋„ฃ์–ด์ค€ ํ›„์— ์œ„์™€ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ์ด๋ฏธ์ง€๊ฐ€ ๋‚˜์˜จ๋‹ค.
  • Vue ํ”„๋กœ์ ํŠธ ํด๋” ์•ˆ์—๋Š” src ํด๋” ๋ง๊ณ ๋„ public ํด๋”๊ฐ€ ์žˆ๋Š”๋ฐ, public ํด๋”์— ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์„ ๊ฑฐ๋ผ๋ฉด '/์ด๋ฏธ์ง€๊ฒฝ๋กœ' ์™€ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ๋œ๋‹ค.
  • ์ฐธ๊ณ ๋กœ public ํด๋”์— ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์œผ๋ฉด ๋‚˜์ค‘์— ๋ฐœํ–‰ํ•  ๋•Œ ์ด๋ฏธ์ง€์˜ ์ด๋ฆ„์ด ๋ณ€ํ•˜์ง€ ์•Š๋Š” ๋ฐ˜๋ฉด, src ํด๋”์— ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์œผ๋ฉด ์ž„์˜๋กœ ์ด๋ฏธ์ง€์˜ ์ด๋ฆ„์ด ๋ฐ”๋€๋‹ค.

๐Ÿ’œ ๋ชจ๋‹ฌ์ฐฝ ๋งŒ๋“ค๊ธฐ

๐Ÿค ๋ชจ๋‹ฌ์ฐฝ UI ๋ ˆ์ด์•„์›ƒ ๋งŒ๋“ค๊ธฐ

  • ๋ญ”๊ฐ€ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ๋ชจ๋‹ฌ์ฐฝ์„ ๋„์šฐ๊ณ  ์‹ถ๋‹ค๋ฉด ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค๊ธฐ ์ „์— ๋ชจ๋‹ฌ์ฐฝ UI ๋ ˆ์ด์•„์›ƒ๋ถ€ํ„ฐ html, css ๋กœ ๋””์ž์ธ์„ ํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.
  • ์™œ๋ƒํ•˜๋ฉด ๊ฐ‘์ž๊ธฐ ๋“ฑ์žฅํ•˜๋Š” ๋™์ ์ธ UI ๋“ค์€ ๋ฏธ๋ฆฌ ๋งŒ๋“ค์–ด๋†“๊ณ  ์•ˆ ๋ณด์ด๊ฒŒ ์ˆจ๊ฒจ๋‘์—ˆ๋‹ค๊ฐ€ ์›ํ•˜๋Š” ๋•Œ์— UI ๋ฅผ ๋ณด์ด๊ฒŒ ๋„์›Œ์ฃผ๋Š” ๋ฐฉ์‹์œผ๋กœ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

 

<div class="black-bg">
    <div class="white-bg">
        <h4>์ƒ์„ธํŽ˜์ด์ง€</h4>
        <p>์ƒ์„ธํŽ˜์ด์ง€ ๋‚ด์šฉ</p>
        <button class="close">๋‹ซ๊ธฐ</button>
    </div>
</div>
  • ๋ชจ๋‹ฌ์ฐฝ html ์˜ ๊ฒฝ์šฐ ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด ์ „์ฒด๋ฅผ ๋ฎ๋Š” ํ˜•์‹์œผ๋กœ ๋งŒ๋“ค์–ด์ ธ์•ผ ํ•˜๋ฏ€๋กœ ๋‹ค๋ฅธ html ํƒœ๊ทธ๋“ค๋ณด๋‹ค ์ƒ๋‹จ์— ์ ์–ด์ฃผ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

 

.black-bg {
	width: 100%; 
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
}

.white-bg {
	width: 90%;
	margin: 80px auto;
	background: white;
	border-radius: 5px;
	padding: 20px 0;
}

.close {
	cursor: pointer;
	border: none;
	background: #6667AB;
	color: white;
	font-weight: bold;
	border-radius: 5px;
	padding: 5px 15px;
}

.close:hover {
	color:white;
	font-weight: bold;
	transform: scale(1.1);
	transition: all 0.5s;
}

๐Ÿค ๋ชจ๋‹ฌ์ฐฝ UI ์ƒํƒœ๋ฅผ ๋ฐ์ดํ„ฐ๋กœ ์ €์žฅํ•˜๊ธฐ

data(){
    return {
        openModal : false,
    }
  • ๋ชจ๋‹ฌ์ฐฝ์˜ ๊ฒฝ์šฐ ๋ณด์ด๊ฑฐ๋‚˜ / ๋ณด์ด์ง€ ์•Š๊ฑฐ๋‚˜, ์ด๋ ‡๊ฒŒ ๋‘ ๊ฐ€์ง€์˜ ์ƒํƒœ๋งŒ ์กด์žฌํ•œ๋‹ค.
  • ๋”ฐ๋ผ์„œ ๋ณด์ด๋Š” ์ƒํƒœ๋ฅผ true, ๋ณด์ด์ง€ ์•Š๋Š” ์ƒํƒœ๋ฅผ false ๋กœ ์ •ํ•œ ํ›„์—, ์ดˆ๊ธฐ๊ฐ’์œผ๋กœ๋Š” ๋ณด์ด์ง€ ์•Š๋„๋ก false ๋กœ data ๋ณด๊ด€ํ•จ์˜ openModal ์— ์ €์žฅํ•ด๋‘์—ˆ๋‹ค.
  • ๋‚˜๋Š” boolean ํ˜•ํƒœ๊ฐ€ ์ต์ˆ™ํ•ด์„œ ์œ„์™€ ๊ฐ™์ด true/false ๋กœ ์ƒํƒœ๋ฅผ ์ •ํ•œ ๊ฑฐ์ง€, ์ด ๋ถ€๋ถ„์€ ์ •ํ•˜๋Š” ์‚ฌ๋žŒ ๋งˆ์Œ์ด๋ผ ์‚ฌ์‹ค 0 ๊ณผ 1 ์ด๋Ÿฐ ์‹์œผ๋กœ ํ‘œํ˜„ํ•ด๋„ ์ƒ๊ด€ ์—†๋‹ค.

๐Ÿค ๋ชจ๋‹ฌ์ฐฝ UI ๋ฅผ ์–ธ์ œ ๋ณด์—ฌ์ค„์ง€/๋ณด์—ฌ์ฃผ์ง€ ์•Š์„์ง€ Vue ๋ฌธ๋ฒ•์œผ๋กœ ์ž‘์„ฑํ•˜๊ธฐ

<div class="black-bg" v-if="openModal == true">
    <div class="white-bg">
        <h4>์ƒ์„ธํŽ˜์ด์ง€</h4>
        <p>์ƒ์„ธํŽ˜์ด์ง€ ๋‚ด์šฉ</p>
        <button class="close">๋‹ซ๊ธฐ</button>
    </div>
</div>
  • ๋ชจ๋‹ฌ์ฐฝ์„ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒฝ์šฐ์˜ ์ƒํƒœ๋ฅผ true, ๋ณด์—ฌ์ฃผ์ง€ ์•Š์„ ๊ฒฝ์šฐ์˜ ์ƒํƒœ๋ฅผ false ๋ผ๊ณ  ํ•˜๊ธฐ๋กœ ์ •ํ–ˆ๋‹ค.
  • ๋”ฐ๋ผ์„œ ์ด์— ๋”ฐ๋ผ html ํƒœ๊ทธ ์•ˆ์— v-if='์กฐ๊ฑด์‹' ์„ ์ž‘์„ฑํ•ด์ฃผ๋ฉด ๋˜๋Š”๋ฐ, ์ด ๋ฌธ๋ฒ•์€ ์กฐ๊ฑด์‹์ด ์ฐธ์ผ ๋•Œ์—๋งŒ html ์„ ๋ณด์—ฌ์ฃผ๊ฒŒ ๋˜๋ฏ€๋กœ ์กฐ๊ฑด์‹์„ openModal == true ๋กœ ์ž‘์„ฑํ•˜๋ฉด ๋œ๋‹ค.
  • ์ด ๋•Œ ๋“ฑํ˜ธ๋ฅผ 1๊ฐœ ์“ฐ๋Š” ๊ฒƒ๊ณผ 2๊ฐœ ์“ฐ๋Š” ๊ฒƒ์€ ๋‹ค๋ฅด๋‹ˆ ์ฃผ์˜ํ•ด์•ผ ํ•œ๋‹ค.
    • ๋“ฑํ˜ธ๊ฐ€ 1๊ฐœ์ธ ๊ฒฝ์šฐ์—๋Š” openModal ์— ์ €์žฅ๋œ ๊ฐ’์„ ๋ฐ”๋กœ true ๋กœ ๋ฐ”๊พธ๊ฒ ๋‹ค๋Š” ์˜๋ฏธ๊ฐ€ ๋˜๊ณ , ๊ทธ์— ๋”ฐ๋ผ ๋ชจ๋‹ฌ์ฐฝ์ด ๋ฐ”๋กœ ๋ณด์—ฌ์ง€๊ฒŒ ๋œ๋‹ค.
    • ๋“ฑํ˜ธ๊ฐ€ 2๊ฐœ์ธ ๊ฒฝ์šฐ์—๋Š” ์–ด๋–ค ์กฐ๊ฑด์— ์˜ํ•ด openModal ์ด true ๋กœ ๋ฐ”๋€Œ๋Š” ๊ฒฝ์šฐ์—๋งŒ ๋ชจ๋‹ฌ์ฐฝ์„ ๋ณด์—ฌ์ค€๋‹ค๋Š” ์˜๋ฏธ๊ฐ€ ๋œ๋‹ค.

๐Ÿค ๋ชจ๋‹ฌ์ฐฝ UI ๋ฅผ ๋„์šฐ๊ณ  ๋‹ซ์„ ์ˆ˜ ์žˆ๋Š” ์Šค์œ„์น˜ ๋งŒ๋“ค๊ธฐ

// template ์ „์ฒด ์ฝ”๋“œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
// ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๋น ๋ฅด๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๋ถˆํ•„์š”ํ•œ ๋‚ด์šฉ์€ ์ œ์™ธํ–ˆ๋‹ค.
<div class="black-bg" v-if="openModal == true" @click="close($event)">
    <div class="white-bg">
        <h4>์ƒ์„ธํŽ˜์ด์ง€</h4>
        <p>์ƒ์„ธํŽ˜์ด์ง€ ๋‚ด์šฉ</p>
        <button class="close">๋‹ซ๊ธฐ</button>
    </div>
</div>

<div class="card">
    <img src="./assets/images/room0.jpg" class="room-image">
    <h4 class="room-name" @click="openModal = true">{{rooms[0]}}</h4>
    <p>{{ prices[0] }}๋งŒ์›</p>
    <button @click="increase(0)">ํ—ˆ์œ„๋งค๋ฌผ์‹ ๊ณ </button> <span>์‹ ๊ณ  ์ˆ˜: {{ report[0] }}</span>
</div>

 

// script ์ „์ฒด ์ฝ”๋“œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
// ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๋น ๋ฅด๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๋ถˆํ•„์š”ํ•œ ๋‚ด์šฉ์€ ์ œ์™ธํ–ˆ๋‹ค.
<script>
export default {
	name: "App",
	data(){
		return {
			openModal : false,
		}
	},
	methods: {
		close(event){
			if(event.target.classList.contains('black-bg') || event.target.classList.contains('close')){
				this.openModal = false;
			} else if (event.target.classList.contains('white-bg')){
				this.openModal = true;
			}
		}
	},
};
</script>
  • ๋ชจ๋‹ฌ์ฐฝ UI ์— ๋Œ€ํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ ๊ฐœ๋ฐœ์€ ์™„๋ฃŒํ–ˆ๊ณ  ์ด์ œ ํŠน์ • ํ–‰์œ„ ํ˜น์€ ์กฐ๊ฑด์— ์˜ํ•ด ๋ชจ๋‹ฌ์ฐฝ UI ๊ฐ€ ๋ณด์ด๊ฒŒ ํ˜น์€ ๋ณด์ด์ง€ ์•Š๋„๋ก ํ•ด๋ณด์•˜๋‹ค.
  • ๋‚ด๊ฐ€ ์ƒ๊ฐํ•œ ๋ฐฉ๋ฒ•์€ ์ƒํ’ˆ๋ช…์„ ํด๋ฆญํ–ˆ์„ ๋•Œ๋Š” ๋ชจ๋‹ฌ์ฐฝ์„ ๋„์šฐ๊ณ , ๋ชจ๋‹ฌ์ฐฝ ๋‚ด์˜ ๋‹ซ๊ธฐ ๋ฒ„ํŠผ์ด๋‚˜ ์–ด๋‘์šด ๋ฐฐ๊ฒฝํ™”๋ฉด์„ ํด๋ฆญํ•˜๋ฉด ๋ชจ๋‹ฌ์ฐฝ์ด ๋‹ซํžˆ๊ฒŒ ํ•˜๋Š” ๊ฒƒ์ด์—ˆ๋‹ค.
  • ๋จผ์ €, html ์ฝ”๋“œ์—์„œ ๋ชจ๋‹ฌ์ฐฝ ์ตœ์ƒ๋‹จ์— ํ•ด๋‹นํ•˜๋Š” black-bg ๋ผ๋Š” class ๋ฅผ ๊ฐ€์ง„ div ํƒœ๊ทธ์— @click=close($event) ๋ผ๊ณ  ์ž‘์„ฑํ•ด์ฃผ์—ˆ๋‹ค.
    • ๋ชจ๋‹ฌ์ฐฝ์ด ๋„์›Œ์ง„ ์ƒํƒœ์—์„œ ๋‚ด๊ฐ€ ํด๋ฆญํ•œ ์š”์†Œ๊ฐ€ black-bg ๋ผ๋Š” class ์— ํ•ด๋‹นํ•˜๊ฑฐ๋‚˜ close ๋ผ๋Š” class ์— ํ•ด๋‹นํ•˜๋ฉด ๋ชจ๋‹ฌ์ฐฝ์ด ๋‹ซํ˜€์•ผ ํ•˜๊ณ , white-bg ์— ํ•ด๋‹นํ•˜๋ฉด ๊ณ„์† ๋ชจ๋‹ฌ์ฐฝ์ด ์—ด๋ ค์žˆ์–ด์•ผ ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ํด๋ฆญํ•œ ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ์•„์•ผ ํ–ˆ๋‹ค.
    • ๊ตฌ๊ธ€๋งํ•œ ๊ฒฐ๊ณผ $event ๊ฐ€ ํด๋ฆญํ•œ ์š”์†Œ์— ํ•ด๋‹นํ•จ์„ ์•Œ ์ˆ˜ ์žˆ์—ˆ๊ณ  ์ด๊ฑธ close() ํ•จ์ˆ˜์— ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋ฐ›์•„ ๋‚˜๋จธ์ง€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์ฃผ์—ˆ๋‹ค.
    • close ๋ผ๋Š” class ๋ฅผ ๊ฐ€์ง„ button ํƒœ๊ทธ์— ๋”ฐ๋กœ @click ์†์„ฑ์„ ๋ถ€์—ฌํ•˜์ง€ ์•Š์€ ์ด์œ ๋Š” ์–ด์ฐจํ”ผ ์ตœ์ƒ๋‹จ ํƒœ๊ทธ์— @click ์†์„ฑ์ด ํ•˜์œ„ ํƒœ๊ทธ๋“ค์— ์˜ํ–ฅ์„ ๋ฏธ์ณ์„œ ํ•„์š”์„ฑ์ด ์—†์–ด์กŒ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
    • data ๋ณด๊ด€ํ•จ์— ์ €์žฅ๋œ openModal ์„ close() ํ•จ์ˆ˜์—์„œ ์‚ฌ์šฉํ•˜๋ ค๋ฉด this ๋ผ๋Š” ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์ฃผ๋Š” ๊ฒƒ๋„ ์žŠ์–ด์„œ๋Š” ์•ˆ๋œ๋‹ค.

 

728x90
๋ฐ˜์‘ํ˜•