[๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ปTA9 ์ธํ„ด 8์ผ์ฐจ]Vue.js ๋””๋ ‰ํ‹ฐ๋ธŒ

Goofiยท2023๋…„ 7์›” 24์ผ
0

Vue.js ๋””๋ ‰ํ‹ฐ๋ธŒ

HTML ํƒœ๊ทธ ์•ˆ์— v-์ ‘๋‘์‚ฌ๋ฅผ ๊ฐ€์ง€๋Š” ๋ชจ๋“  ์†์„ฑ์„ ์˜๋ฏธ.

<a v-if="flag">๋ฆ‡๋น™</a>

์ฃผ์š” ๋””๋ ‰ํ‹ฐ๋ธŒ

๋””๋ ‰ํ‹ฐ๋น„ ์ด๋ฆ„ ์—ญํ• 
v-if ์ง€์ •ํ•œ ๋ทฐ ๋ฐ์ดํ„ฐ ๊ฐ’์˜ ์ฐธ ๊ฑฐ์ง“ ์—ฌ๋ถ€์— ๋”ฐ๋ผ ํ•ด๋‹น HTML ํƒœ๊ทธ๋ฅผ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๊ฑฐ๋‚˜ ํ‘œ์‹œํ•˜์ง€ ์•Š์Œ
v-for ์ง€์ •ํ•œ ๋ทฐ ๋ฐ์ดํ„ฐ์˜ ๊ฐœ์ˆ˜๋งŒํผ ํ•ด๋‹น HTML ํƒœ๊ทธ๋ฅผ ๋ฐ˜๋ณต ์ถœ๋ ฅ
v-show v-if์™€ ์œ ์‚ฌํ•˜๊ฒŒ ๋ฐ์ดํ„ฐ์˜ ์ง„์œ„ ์—ฌ๋ถ€์— ๋”ฐ๋ผ ํ•ด๋‹น HTML ํƒœ๊ทธ๋ฅผ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๊ฑฐ๋‚˜ ํ‘œ์‹œํ•˜์ง€ ์•Š์Œ. ๋‹ค๋งŒ, v-if๋Š” ํ•ด๋‹น ํƒœ๊ทธ๋ฅผ ์™„์ „ํžˆ ์‚ญ์ œํ•˜์ง€๋งŒ v-show๋Š” css ํšจ๊ณผ๋งŒ display:none;์œผ๋กœ ์ฃผ์–ด ์‹ค์ œ ํƒœ๊ทธ๋Š” ๋‚จ์•„ ์žˆ๊ณ  ํ™”๋ฉด ์ƒ์œผ๋กœ๋งŒ ๋ณด์ด์ง€ ์•Š์Œ
v-bind HTML ํƒœ๊ทธ์˜ ๊ธฐ๋ณธ ์†์„ฑ๊ณผ ๋ทฐ ๋ฐ์ดํ„ฐ ์†์„ฑ์„ ์—ฐ๊ฒฐ
v-on ํ™”๋ฉด ์š”์†Œ์˜ ์ด๋ฒคํŠธ๋ฅผ ๊ฐ์ง€ํ•˜์—ฌ ์ฒ˜๋ฆฌ ํ•  ๋•Œ ์‚ฌ์šฉ.
ex) v-on:click์€ ํ•ด๋‹น ํƒœ๊ทธ์˜ ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ๊ฐ์ง€ํ•˜์—ฌ ํŠน์ • ๋ฉ”์„œ๋“œ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.
v-model form์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ์†์„ฑ. ํผ์— ์ž…๋ ฅํ•œ ๊ฐ’์„ ๋ทฐ ์ธ์Šคํ„ด์Šค์˜ ๋ฐ์ดํ„ฐ์™€ ์ฆ‰์‹œ ๋™๊ธฐํ™”. ํ™”๋ฉด์— ์ž…๋ ฅ๋œ ๊ฐ’์„ ์ €์žฅํ•˜์—ฌ ์„œ๋ฒ„์—์„œ ๋ณด๋‚ด๊ฑฐ๋‚˜ watch์™€ ๊ฐ™์€ ๊ณ ๊ธ‰ ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ์ถ”๊ฐ€ ๋กœ์ง ์ˆ˜ํ–‰๊ฐ€๋Šฅ.

v-for

<li v-for = (todoItem, index) in todoItems></li>

todoItems ์•ˆ์— ๋ฐฐ์—ด์—์„œ todoItem ์ˆซ์ž ๋งŒํผ ๋Œ๊ฒ ๋‹ค.

v-model
React๋กœ ๋”ฐ์ง€์ž๋ฉด onChange

ํ™”๋ฉด์—์„œ์˜ DOM์กฐ์ž‘(๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ)๊ณผ Vue ์•ˆ์—์„œ ์ธ์Šคํ„ด์Šค์˜ ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ์ด ๋™์ผํ•˜๊ฒŒ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

v-on
React๋กœ ๋”ฐ์ง€์ž๋ฉด onClick

<span @click="showModal=false">X</span>
<span v-on:click="showModal = false" >X</span>

๊ฐ™๋‹ค.

Contaniner Component & Presentation Component

container component

ํ•œ๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š” ์ปดํฌ๋„ŒํŠธ์ด๋‹ค.

presentation component

UI์ ์œผ๋กœ ํ‘œํ˜„๋งŒ ํ•œ๋‹ค.

created
life cycle hooks์ด๋‹ค.

x-template์ด๋ž€
.vueํŒŒ์ผ๋กœ ๊ด€๋ฆฌํ•˜๊ณ  ์žˆ์œผ๋‹ˆ๊นŒ ๋ชจ๋“ˆํ™”๋ฅผ ํ•˜๊ณ  ์žˆ๋‹ค.
ํ…œํ”Œ๋ฆฟ์„ ๋ชจ๋“ˆํ™” ํ•˜๋ ค๋ฉด x-template์„ ์“ธ ์ˆ˜ ์žˆ๋‹ค.

slot

์Šฌ๋กฏ์€ ์ปดํฌ๋„ŒํŠธ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์—ฌ์ฃผ๋Š” ๊ธฐ๋Šฅ์ด๋‹ค. ํŠน์ • ์ปดํฌ๋„ŒํŠธ์— ๋“ฑ๋กํ•œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ๋งˆํฌ์—…์„ ํ™•์žฅํ•˜๊ฑฐ๋‚˜ ์žฌ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

์‚ฌ์šฉ๋ฐฉ๋ฒ•
์ƒ์œ„

<template v-slot:header>๊ฒฝ๊ณ !</template>

ํ•˜์œ„

<div class="modal-header">
	<slot name="header">default header</slot>
</div>

Vuex

๋ฌด์ˆ˜ํžˆ ๋งŽ์€ ์ปดํฌ๋„ŒํŠธ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ์ƒํƒœ ๊ด€๋ฆฌ ํŒจํ„ด์ด์ž ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

  • React์˜ Flux ํŒจํ„ด์—์„œ ๊ธฐ์ธํ•จ

FluxํŒจํ„ด

์™œ Flux๊ฐ€ ๋“ฑ์žฅํ–ˆ๋Š”๊ฐ€?
MVC ํŒจํ„ด์˜ ๋ณต์žกํ•œ ๋ฐ์ดํ„ฐ ํ๋ฆ„ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ

์›น ์•ฑ์—์„œ์˜ MVC๋Š” Controller๊ฐ€ ํ•˜๋Š” ์—ญํ• ์ด ๊ทธ๋ณด๋‹ค๋„ ์กฐ๊ธˆ ํฌ๋‹ค. SPA์˜ ๊ฒฝ์šฐ์—๋Š” ํ™”๋ฉด ํ•˜๋‚˜๋ฅผ ๊ณ„์† ๋Œ๊ณ  ๊ฐ€๋Š” ์ƒ์ด๋‹ค ๋ณด๋‹ˆ

Vuex๊ฐ€ ์™œ ํ•„์š”ํ• ๊นŒ?

profile
์˜ค๋Š˜๋ณด๋‹จ ๋‚ด์ผ์ด ๊ฐ•ํ•œ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค!!๐Ÿง‘๐Ÿปโ€๐Ÿ’ป

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