Vue Composition API 핵심 패턴 with TS

1
2
3
4
createApp(App)
  .use(플러그인)
  .component(컴포넌트)
  .mount('#app')

1
2
3
4
5
6
7
8
9
10
11
<script setup lang="ts">
  // 스크립트(JS)
</script>

<template>
  <!-- 템플릿(HTML) -->
</template>

<style scoped lang="scss">
  /* 스타일(CSS) */
</style>

1
2
3
4
5
6
7
8
9
<template>
  <div></div>
</template>

<style scoped>
div {
  color: red;
}
</style>

1
2
3
4
5
6
<style>
  div[data-v-7a7a37b1] {
    color: red;
  }
</style>
<div data-v-7a7a37b1></div>

1
2
3
4
5
6
7
<div data-v-7a7a37b1 class="parent">
  <div data-v-7a7a37b1 data-v-0904fc8e class="child-wrap">
    <div data-v-0904fc8e class="child">
      CHILD
    </div>
  </div>
</div>

1
2
3
<style scoped lang="scss"></style>
<style scoped></style>
<style></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script setup>
import { ref, reactive } from 'vue'

const refPrimitive = ref(123) // 반응성 O
const reactivePrimitive = reactive(123) // 반응성 X
console.log(refPrimitive.value) // 123
console.log(reactivePrimitive === 123) // true

const user = {
  name: 'HEROPY',
  age: 85
}
const refUser = ref(user)
const reactiveUser = reactive(user)

console.log(refUser.value.name) // 'HEROPY'
console.log(reactiveUser.name) // 'HEROPY'

console.log(refUser.value.age) // 85
console.log(reactiveUser.age) // 85
</script>

1
2
3
4
5
6
7
8
9
10
<template>
  <div>{{ refPrimitive }}</div>
  <div>{{ reactivePrimitive }}</div>

  <div>{{ refUser.name }}</div>
  <div>{{ reactiveUser.name }}</div>
  
  <div>{{ refUser.age }}</div>
  <div>{{ reactiveUser.age }}</div>
</template>

1
2
3
4
5
<script setup lang="ts">
import { reactive } from 'vue'

const reactivePrimitive = reactive(123) // 'number' 형식의 인수는 'object' 형식의 매개 변수에 할당될 수 없습니다.ts(2345)
</script>

1
2
3
4
5
6
7
8
9
10
11
<script setup lang="ts">
import { ref } from 'vue'

const data = 123 // 일반 데이터
const reactiveData = ref(123) // 반응형 데이터
</script>

<template>
  <div>{{ data }}</div>
  <div>{{ reactiveData }}</div>
</template>

1
2
<div>123</div>
<div>123</div>

1
2
3
<script setup lang="ts">
  const rawHtml = '<div style="color: red;">HTML 출력</div>'
</script>

1
2
3
4
<template>
  <div>{{ rawHtml }}</div>
  <div v-html="rawHtml"></div>
</template>

1
2
<div>&lt;div style="color: red;"&gt;HTML 출력&lt;/div&gt;</div>
<div style="color: red;">HTML 출력</div>

1
2
3
<요소 v-bind:속성="데이터" />
<요소 :속성="데이터" />
<요소 v-bind="속성_객체" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script setup lang="ts">
import { ref } from 'vue'

const name = ref('hello-world')
const isValid = ref(true)
const attrs = ref({
  id: 'hello-world',
  disabled: true,
})
</script>

<template>  
  <!-- 일반 속성 바인딩 -->
  <div :id="name"></div>
  
  <!-- 불린 속성 바인딩 -->
  <input :disabled="isValid" />

  <!-- 여러 속성을 객체로 바인딩 -->
  <button v-bind="attrs">버튼!</button>
</template>

1
2
3
4
5
<div id="hello-world"></div>

<input disabled />

<button id="hello-world" disabled>버튼!</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script setup lang="ts">
import { ref } from 'vue'

const attrName = ref('id')
const attrValue = ref('hello')
</script>

<template>
  <button @click="attrName = attrName === 'id' ? 'class' : 'id'">Toggle attribute name!</button>
  <h1 :[attrName]="attrValue">Hello!</h1>
</template>

<style scoped>
#hello {
  color: red;
}
.hello {
  color: blue;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script setup lang="ts">
import { ref } from 'vue'

const name = ref('HEROPY')
const age = ref(123)
const isValid = ref(true)

function add(a: number, b: number) {
  return a + b
}
</script>

<template>
  <div>{{ name.split('').reverse().join('') }}</div>
  <div>{{ age - 100 }}</div>
  <div>{{ isValid ? 'YES' : 'NO' }}</div>
  <div :id="`hello-${name}`">{{ add(age, 85) }}</div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script setup lang="ts">
import { ref } from 'vue'

const isActive = ref(true)
const error = ref(false)
const status = ref('primary')

const cssClasses = ref({
  active: true,
  error: false
})
</script>

<template>
  <!-- 객체로 바인딩 -->
  <div 
    class="btn"
    :class="{ 
      active: isActive,
      error,
      [`btn-${status}`]: true,
    }"></div>
  
  <!-- 배열로 바인딩 -->
  <div
    class="btn"
    :class="[
      isActive ? 'active' : '',
      error ? 'error' : '',
      `btn-${status}`,
    ]"></div>
  
  <!-- 객체와 배열을 함께 사용 -->
  <div
    class="btn"
    :class="[
      cssClasses,
      `btn-${status}`,
    ]"></div>
</template>

1
2
3
<div class="btn active btn-primary"></div>
<div class="btn active btn-primary"></div>
<div class="btn active btn-primary"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script setup lang="ts">
import { ref } from 'vue'

const color = ref('red')
const size = ref(16)

const colorStyles = {
  color: 'red',
  backgroundColor: 'blue',
}
</script>

<template>
  <!-- 객체로 바인딩 -->
  <div 
    :style="{ 
      color,
      fontSize: `${size}px`,
      backgroundColor: colorStyles.backgroundColor
    }"></div>
  
  <!-- 배열로 바인딩 -->
  <!-- 여러 스타일 객체를 사용하기 위한 패턴 -->
  <div
    :style="[
      colorStyles,
      { fontSize: `${size}px` },
    ]"></div>
</template>

1
2
<div style="color: red; font-size: 16px; background-color: blue;"></div>
<div style="color: red; font-size: 16px; background-color: blue;"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<script setup lang="ts">
import { useTemplateRef, onMounted } from 'vue'

const inputRef = useTemplateRef('my-input')

onMounted(() => {
  inputRef.value?.focus()
})
</script>

<template>
  <input ref="my-input" />
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script setup lang="ts">
import { ref, useTemplateRef, onMounted } from 'vue'

const fruits = ref(['Apple', 'Banana', 'Orange'])
const liRefs = useTemplateRef('items')

onMounted(() => {
  liRefs.value?.forEach(liEl => {
    console.log(liEl.textContent)
  })
})
</script>

<template>
  <ul>
    <li
      v-for="fruit in fruits"
      ref="items"
      :key="fruit">
      {{ fruit }}
    </li>
  </ul>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script setup lang="ts">
import { ref, onMounted } from 'vue'

const inputRef = ref<HTMLInputElement | null>(null)
const fruits = ref(['Apple', 'Banana', 'Orange'])
const liRefs = ref<HTMLLIElement[]>([])

onMounted(() => {
  inputRef.value?.focus()
  liRefs.value?.forEach(liEl => {
    console.log(liEl.textContent)
  })
})
</script>

<template>
  <input ref="inputRef" />
  <ul>
    <li
      v-for="fruit in fruits"
      ref="items"
      :key="fruit">
      {{ fruit }}
    </li>
  </ul>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script setup lang="ts">
import { ref } from 'vue'

const isShow = ref(true)
const list = ref([])
</script>

<template>
  <!-- v-if -->
  <div v-if="isShow"></div>
  <div v-if="isShow && list.length"></div>
  <div v-if="isShow || list.length"></div>
  
  <!-- v-else -->
  <div v-if="isShow"></div>
  <div v-else></div>

  <!-- v-else-if -->
  <div v-if="isShow"></div>
  <div v-else-if="list.length"></div>
  <div v-else></div>
</template>

1
2
3
4
5
<script setup lang="ts">
import { ref } from 'vue'

const isShow = ref(true)
</script>

1
2
3
4
5
<template>
  <h1 v-if="isShow"></h1>
  <div v-if="isShow"></div>
  <p v-if="isShow"></p>
</template>

1
2
3
4
5
6
7
<template>
  <div v-if="isShow">
    <h1></h1>
    <div></div>
    <p></p>
  </div>
</template>

1
2
3
4
5
<template v-if="isShow">
  <h1></h1>
  <div></div>
  <p></p>
</template>

1
2
3
4
5
6
7
8
9
<div
  v-for="아이템_변수 in 배열_데이터"
  :key="고유한_원시형">
</div>

<div
  v-for="(아이템_변수, 인덱스) in 배열_데이터"
  :key="고유한_원시형">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script setup lang="ts">
import { ref } from 'vue'

const users = ref([
  { name: 'Neo', age: 85 },
  { name: 'Lewis', age: 22 },
  { name: 'Evan', age: 46 }
])
</script>

<template>
  <div
    v-for="(user, index) in users"
    :key="user.name"
    :data-user-name="user.name"
    :data-user-age="user.age">
    {{ index + 1 }}) {{ user.name }}({{ user.age }})
  </div>
</template>

1
2
3
<div data-user-name="Neo" data-user-age="85"> 1) Neo(85) </div>
<div data-user-name="Lewis" data-user-age="22"> 2) Lewis(22) </div>
<div data-user-name="Evan" data-user-age="46"> 3) Evan(46) </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div
  v-for="값 in 객체_데이터"
  :key="고유한_원시형">
</div>

<div
  v-for="(값, 속성) in 객체_데이터"
  :key="고유한_원시형">
</div>

<div
  v-for="(값, 속성, 인덱스) in 객체_데이터"
  :key="고유한_원시형">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script setup lang="ts">
import { ref } from 'vue'

const userInfo = ref({
  name: 'Neo',
  age: 85,
  emails: ['thesecon@gmail.com', 'neo@zillinks.com']
})
</script>

<template>
  <div
    v-for="(value, key, index) in userInfo"
    :key="key">
    <template v-if="Array.isArray(value)">
      {{ index + 1 }}) {{ key }}: {{ value.join(', ') }}
    </template>
    <template v-else>
      {{ index + 1 }}) {{ key }}: {{ value }}
    </template>
  </div>
</template>

1
2
3
<div>1) name: Neo</div>
<div>2) age: 85</div>
<div>3) emails: thesecon@gmail.com, neo@zillinks.com</div>

1
2
3
4
5
6
7
<template>
  <div 
    v-for="n in 4" 
    :key="n">
    {{ n }}
  </div>
</template>

1
2
3
4
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

1
2
3
4
5
6
<script setup lang="ts">
import { ref } from 'vue'

const isShow = ref(true)
const list = ref([1, 2, 3])
</script>

1
2
3
4
5
6
7
8
9
<!-- 권장하지 않는 방법 -->
<template>
  <div
    v-if="isShow"
    v-for="item in list" 
    :key="item">
    {{ item }}  
  </div>
</template>

1
2
3
4
5
6
7
8
<!-- 권장하는 방법 -->
<template v-if="isShow">
  <div
    v-for="item in list" 
    :key="item">
    {{ item }}  
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script setup lang="ts">
import { ref } from 'vue'

const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
</script>

<template>
  <ul>
    <template
      v-for="item in list"
      :key="item">
      <li v-if="item > 3 && item < 8">
        {{ item }}
      </li>
    </template>
  </ul>
</template>

1
2
3
4
5
6
<ul>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

function handler() {
  count.value += 1
}
</script>

<template>
  <h1>{{ count }}</h1>
  <button @click="count += 1">증가!</button> <!-- 인라인 핸들러 -->
  <button @click="handler">증가!</button> <!-- 메소드 핸들러 -->
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script setup lang="ts">
import { ref } from 'vue'

const urls = ref([
  'heropy.dev',
  'github.com',
  'google.com',
])

function handler(name: string, event: MouseEvent) {
  event.preventDefault()
  location.href = `https://${name}`
}
</script>

<template>
  <a 
    v-for="url in urls" 
    :key="url" 
    :href="`https://${url}`" 
    @click="handler(url, $event)">
    {{ url }}
  </a>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

function increase() {
  count.value += 1
}
function log(event: MouseEvent) {
  console.log(event)
}
</script>

<template>
  <h1>{{ count }}</h1>
  <button @click="increase(), log($event)">증가!</button>
  <button @click="increase(); log($event)">증가!</button>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <a @click.stop="handler">클릭!</a>
  <input @keydown.stop="handler" />
  
  <!-- 핸들러 없이 수식어만 사용 -->
  <a @click.stop>클릭!</a>
  <input @keydown.stop />

  <!-- 수식어 체이닝 -->
  <a @click.stop.prevent="handler">클릭!</a>
  <input @keydown.stop.enter="handler" />
  
  <!-- 정확한 키 조합 -->
  <a @click.ctrl.exact="handler">클릭!</a>
  <input @keydown.alt.enter.exact="handler" />
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script setup lang="ts">
import { ref } from 'vue'

const text = ref('')
</script>

<template>
  <!-- 양방향 데이터 바인딩 -->
  <input
    :value="text"
    @input="text = ($event.target as HTMLInputElement).value" />

  <!-- v-model 디렉티브를 통한 양방향 데이터 바인딩 -->
  <input v-model="text" />
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script setup lang="ts">
import { ref } from 'vue'

const text = ref('')
</script>

<template>
  <!-- 일반적인 경우, -->
  <input v-model="text" />
  <!-- 한글이 필요한 경우, -->
  <input
    :value="text"
    @input="text = ($event.target as HTMLInputElement)?.value" />
  <h1>{{ text }}</h1>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script setup lang="ts">
import { ref } from 'vue'

const text = ref('')
</script>

<template>
  <!-- 일반적인 경우, -->
  <textarea v-model="text"></textarea>
  <!-- 한글이 필요한 경우, -->
  <textarea
    :value="text"
    @input="text = ($event.target as HTMLTextAreaElement)?.value"></textarea>
  <pre>{{ text }}</pre>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script setup lang="ts">
import { ref } from 'vue'

const checked = ref(false)
</script>

<template>
  <label>
    <input
      v-model="checked"
      type="checkbox" />
    동의합니다.
  </label>
  <h2>동의 여부: {{ checked ? '예' : '아니오' }}</h2>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script setup lang="ts">
import { ref } from 'vue'

interface Fruit {
  text: string
  value: string
}
const fruits = ref<Fruit[]>([
  { text: '사과', value: 'apple' },
  { text: '바나나', value: 'banana' },
  { text: '체리', value: 'cherry' }
])
const checked = ref<string[]>([])

function setChecked(event: Event, fruit: Fruit) {
  checked.value = (event.target as HTMLInputElement)?.checked
    ? checked.value.concat([fruit.value])
    : checked.value.filter(v => v !== fruit.value)
}
</script>

<template>
  <label
    v-for="fruit in fruits"
    :key="fruit.value">
    <input
      :checked="checked.includes(fruit.value)"
      :value="fruit.value"
      type="checkbox"
      @change="setChecked($event, fruit)" />
    {{ fruit.text }}
  </label>
  <h2>선택된 과일: {{ checked.join(', ') }}</h2>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script setup lang="ts">
import { ref } from 'vue'

interface Fruit {
  text: string
  value: string
}
const fruits = ref<Fruit[]>([
  { text: '사과', value: 'apple' },
  { text: '바나나', value: 'banana' },
  { text: '체리', value: 'cherry' }
])
const picked = ref('')
</script>

<template>
  <label
    v-for="fruit in fruits"
    :key="fruit.value">
    <input
      v-model="picked"
      type="radio"
      :value="fruit.value" />
    {{ fruit.text }}
  </label>
  <h2>선택된 과일: {{ picked }}</h2>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script setup lang="ts">
import { ref } from 'vue'

interface Fruit {
  text: string
  value: string
}
const fruits = ref<Fruit[]>([
  { text: '사과', value: 'apple' },
  { text: '바나나', value: 'banana' },
  { text: '체리', value: 'cherry' }
])
const selected = ref('')
</script>

<template>
  <select v-model="selected">
    <option
      value=""
      disabled>
      가장 좋아하는 과일을 선택하세요.
    </option>
    <option
      v-for="fruit in fruits"
      :key="fruit.value"
      :value="fruit.value">
      {{ fruit.text }}
    </option>
  </select>
  <h2>선택된 과일: {{ selected }}</h2>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script setup lang="ts">
import { ref } from 'vue'

const fruits = ref([
  { text: '사과', value: 'apple' },
  { text: '바나나', value: 'banana' },
  { text: '체리', value: 'cherry' }
])
const selected = ref<string[]>([])
</script>

<template>
  <select
    v-model="selected"
    multiple>
    <option
      value=""
      disabled>
      가장 좋아하는 과일을 선택하세요.
    </option>
    <option
      v-for="fruit in fruits"
      :key="fruit.value"
      :value="fruit.value">
      {{ fruit.text }}
    </option>
  </select>
  <h2>선택된 과일: {{ selected }}</h2>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script setup lang="ts">
import { ref, useTemplateRef, watch } from 'vue'

const text = ref('')
const inputRef = useTemplateRef('input')

// text 갱신과 inputRef 내용을 동기화
watch(text, newValue => {
  if (inputRef.value && inputRef.value.innerText !== newValue) {
    inputRef.value.innerText = newValue
  }
})
</script>

<template>
  <div
    ref="input"
    contenteditable
    @input="text = ($event.target as HTMLDivElement).innerText"></div>
  <pre>{{ text }}</pre>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
<script setup lang="ts">
import { ref } from 'vue'

const text = ref('')
const count = ref(0)
</script>

<template>
  <input v-model.lazy="text" />
  <input v-model.number="count" />
  <input v-model.trim="text" />
</template>

1
const 계산된_데이터 = computed(게터)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup lang="ts">
import { ref, computed } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)

function increase() {
  count.value += 1
}
</script>

<template>
  <div>{{ count }}</div>
  <div>{{ double }}</div>
  <button @click="increase">증가!</button>
</template>

1
2
3
4
const 계산된_데이터 = computed({
  get: 게터,
  set: 세터
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script setup lang="ts">
import { ref, computed } from 'vue'

const count = ref(0)
const double = computed({
  get: () => count.value * 2,
  set: val => {
    count.value = val / 2
  }
})

function increase() {
  double.value += 1
}
</script>

<template>
  <div>{{ count }}</div>
  <div>{{ double }}</div>
  <button @click="increase">증가!</button>
</template>