Vue 배우기 (2)

조건부 렌더링

v-if는 조건에 따라 컴포넌트를 렌더링하거나 안 보이게 하는 디렉티브다. Vue 튜토리얼의 샌드박스에서 써보니 v-if만 있어도 무방하지만 v-else는 반드시 v-if와 동반돼야 하고, 둘을 같이 쓸 땐 형제 컴포넌트로 가까이 둬야 한다.

 

v-else-if 디렉티브도 있으며, 일반적인 if/else-if처럼 사용하면 된다.

<script>
  const awesome = ref(true)
</script>

<template>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

 

목록 렌더링

리액트에서 array.map() 메소드로 컴포넌트를 렌더링할 때와 같은 디렉티브다. 리액트에서와 마찬가지로 배열을 렌더링할 땐 key prop을 추가해줘야 한다.

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

 

computed() 상태

Vue에서는 상태값의 변화에 맞춰 갱신되는 "파생된 상태값"을 생성하는 기능이 빌트인되어 있다. Recoil의 selector 기능으로 파생된 상태를 추출하는 것과 같은 역할을 한다. computed() 메소드 안에서 원본 상태를 가공한 값을 리턴하면 원본 값을 참조해 다이나믹하게 값이 바뀌는 파생 상태를 만들 수 있다.

// 기준이 되는 상태값
const todos = ref([
  { id: id++, text: 'Learn HTML', done: true },
  { id: id++, text: 'Learn JavaScript', done: true },
  { id: id++, text: 'Learn Vue', done: false }
])
const hideCompleted = ref(false)

// 위 상태의 변화를 감지하는 파생 값
// todos 아이템의 done 값과 hideCompleted 값이 바뀔 때마다 파생 상태의 값도 갱신됨
const filteredTodos = computed(() => {
  return hideCompleted.value
    ? todos.value.filter((t) => !t.done)
    : todos.value
})