Computed Property
computed()
- 계산된 속성을 정의하는 함수
- 미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄인다.
const todos = ref([
{ text : 'Vue 실습'},
{ text : '자격증 공부'},
{ text : 'TIL 작성'}
])
<h2> 남은 할 일 </h2>
<p> {{todos.length > 0 ? '아직남았다':'퇴근!'}}</p>
const { createApp, ref, computed } = Vue
const restOfTodos = computed(() => {
return todos.value.length >0 ? '아직 남았다':'퇴근!'
})
- 반환되는 값은 computed ref 이며 일반 refs와 유사하게 계산된 결과를 .value로 참조할 수 있다.
- computed 속성은 의존된 반응형 데이터를 자동으로 추적한다.
- 의존하는 데이터가 변경될 때만 재평가함
- restOfTodos의 계산은 todos에 의존하고 있다
- 따라서 todos가 변경될 때만 restOfTodos가 업데이트 된다.
computed vs method
- method로도 동일한 기능 구현 가능
- computed 속성은 의존된 반응형 데이터를 기반으로 캐시 된다.
Conditional Rendering
v-if
- 표현식 값의 T/F를 기반으로 요소를 조건부로 렌더링
- 'v-else' directive를 사용하여 v-if에 대한 else 블록을 나타낼 수 있다.
- 예시1
const isSeen = ref(true)
<p v-if='isSeen'>true일 때 보여요</p>
<p v-else>flase일 때 보여요</p>
<button @click='isSeen =!isSeen'>토글</button>- @click -> 이벤트 처리기 지시자
Vue.js에서 @click는 이벤트 처리기를 정의하는 지시자이다.
이 구문은 사용자가 해당 버튼을 클릭할 때 어떤 동작을 수행해야 하는지를 정의한다.
@click 지시자 뒤에 오는 표현식은 클릭 이벤트가 발생했을 때 실행될 JavaScript 코드를 지정함.
@click='isSeen = !isSeen'는 버튼이 클릭됐을 때 isSeen 변수의 값을 토글하는 코드를 실행한다.
isSeen 변수의 초기값은 true이며, 클릭 이벤트가 발생하면 !isSeen 표현식을 사용하여 isSeen의 현재 값의 반대 값을 할당한다.
즉, isSeen이 true이면 클릭 후에는 false가 되고, false이면 클릭 후에는 true가 된다.
이것은 "토글" 버튼을 클릭할 때 상태를 전환하는 동작을 수행한다.
그러므로 "토글" 버튼을 클릭할 때, 두 개의 <p> 요소 중 하나가 나타나고 다른 하나가 숨겨진다.- 예시2
const name = ref('Cathy')
<div v-if="name === 'Alice'">Alice입니다</div>
<div v-else-if="name === 'Bella'">Bella입니다.</div>
<div v-else-if="name === 'Cathy'">Cathy입니다.</div>
<div v-else>아무도 아닙니다.</div>
- v-if는 directive이기 때문에 단일요소에만 연결 가능하다.
- 이 경우, template 요소에 v-if를 사용하여 하나 이상의 요소에 대해 적용할 수 있다.
<template v-if="name === 'Cathy'">
<div>Cathy입니다</div>
<div>나이는 30살입니다.</div>
</template>HTML <'template'> element
- 보이지 않는 wrapper 역할
v-if vs v-show
v-show
- 표현식 값의 T/F를 기반으로 요소의 가시성을 전환
- v-show는 항상 렌더링 되어 DOM에 남아있다.
- CSS display 속성만 전환하기 때문이다
const isShow = ref(false)
<div v-show='isShow'>v-show</div>v-for
-
소스 데이터를 기반으로 요소 또는 템플릿 블록을 여러번 렌더링
-
v-for은 alias in expression 형식의 특수 구문을 사용하여 반복되는 현재 요소에 대한 별칭을 제공한다
<div v-for='item in items'>
{{item.text}}
</div>
<div v-for="(item, index) in items"></div>
<div v-for='value in object></div>
<div v-for='(value, key) in object></div>
<div v-for='(value,key, index) in object></div>
- 예시1
- 배열 반복
const myArr = ref([
{name: 'Alice', age:20},
{name: 'Bella', age:21}
])
<div v-for="(item, index) in myArr">
{{ index }} / {{ item }}
</div>- 예시2
- 객체 반복
const myObj = ref({
name: 'Cathy',
age: 30
})
<div v-for="(value, key, index) in myObj">
{{ index }} / {{ key }} / {{ value }}
</div><ul>
<template v-for="item in myArr">
<li>{{item.name}}</li>
<li>{{item.age}}</li>
<hr>
</template>
</ul>- 중첩된 v-for
- 각 v-for 범위는 상위 범위에 접근 할 수 있다.
const myInfo = ref([
{name: 'Alice', age:20, friends: ['Bella, 'Cathy', 'Dan']},
{name: 'Bella', age:21, friends: ['Alice', 'Cathy']}
])
<ul v-for='item in myInfo'>
<li v-for='friend in item.friends'>
{{item.name}} - {{friend}}
</li>
</ul>v-for with key
- key는 반드시 각 요소에 대한 고유한 값을 나타낼 수 잇는 식별자이어야 한다.
let id = 0
const items = ref([
{id: id++, name:'Alice'},
{id: id++, name:'Bella'},
])
<div v-for='item in items' :key='item.id'>
<!--content-->
</div>v-for 과 v-if 를 같이 쓸 경우
해결법 1
- computed를 활용해 필터링 된 목록을 반환하여 반복하도록 설정
const completeTodos = computed(() => {
return todos.value.filter((todo) => !todo.isComplete)
})
<ul>
<li v-for="todo in completTodos" :key="todo.id">
{{ todo.name }}
</li>
</ul>- v-if가 더 높은 우선 순위를 가지므로 v-for의 todo요소를 v-if에서 사용할 수 없다
- v-for과 template 요소를 사용해 v-if 를 이동
<ul>
<template v-for="todo in todos" :key="todo.id">
<li v-if="!todo.isComplete">
{{todo.name}}
</li>
</template>
</ul>Watchers
watch()
- 반응형 데이터를 감시하고, 감시하는 데이터가 변경되면 콜백함수를 호출한다.
- 구조
watch(variable,(newValue, oldValue) => {
//do something
}-
variable
- 감시하는 변수
-
newValue
- 감시하는 변수가 변화된 값
- 콜백함수의 첫번째 인자
-
oldValue
- 콜백함수의 두번째 인자
-
예시1
- 감시하는 변수에 변화가 생겼을 때 기본 동작 확인하기
<button @click='count++'>Add 1</button>
<p>Count: {{count}}</p>
const count = ref(0)
const countWatch = watch(count, (newValue, oldValue) => {
console.log(`newValue: ${newValue}, oldValue: ${oldValue}`)
})
- 예시2
- 감시하는 변수에 변화가 생겼을 때 연관 데이터 업데이트 하기
<input v-model='message'>
<p>Message length : {{messageLength}}</p>
const message = ref('')
const messageLength = ref(0)
const messageWatch = watch(message, (newValue,oldValue) => {
messageLength.value = newValue.length
})
Lifecycle Hooks
-
Vue 인스턴스의 생애주기 동안 특정 시점에 실행되는 함수
- 개발자가 특정 단계에서 의도하는 로직이 실행될 수 있도록 함
-
- Vue 컴포넌트 인스턴스가 초기 렌더링 및 DOM 요소 생성이 완료된 후 특정 로직을 수행한다.
const { createApp, ref, onMounted } = Vue
setup() {
onMounted(() => {
console.log('mounted')
})
}- 반응형 데이터의 변경으로 인해 컴포넌트의 DOM이 업데이트 된 후 특정로직을 수행한다.
Vue 스타일 가이드
참조
- computed의 반환값은 의존하는 데이터의 파생된 값
- 일종의 snapshot 이며 의존하는 데이터가 변경될 때 마다 새 snapshot이 생성된다.
새싹 BJY