[Vue] List Rendering

📚 저번 포스팅에서 조건부 렌더링에 대해서 알아보았다. 이번 포스팅에서는 리스트 렌더링에 대해서 다뤄보자.

1. v-for

소스 데이터(Array, Object, Number, String, Iterable)를 기반으로 요소 또는 템플릿 블록을 여러 번 렌더링

v-for 구조

• v-for는 alias in expression 형식의 특수 구문을 사용한다.!

• 인덱스(객체에서는 key)에 대한 별칭을 지정할 수 있음

v-for 예시

<div v-for="people in peoples">
  {{ people.name }} 
  {{ people.age }}
</div>

const peoples = ref([
  { name: 'Tony', age: 20 },
  { name: 'Peter', age: 28 },
])

이렇게 잘 나오는 것을 확인할 수 있다.

2. v-for with key

반드시 v-for와 key를 함께 사용한다.

그 이유는 key를 사용하면 Vue가 각 항목을 고유하게 식별할 수 있어, 리스트가 변경될 때 컴포넌트의 상태를 올바르게 유지할 수 있기 때문이다.

let id = 0
const peoples = ref([
  { id: id++, name: 'Tony', age: 20 },
  { id: id++, name: 'Peter', age: 28 },
])

<div v-for="people in peoples" :key="people.id">
  {{ people.name }} 
  {{ people.age }}
</div>

🖍 결론적으로, v-for와 key를 함께 사용하는 것은 Vue 애플리케이션의 성능, 안정성, 그리고 예측 가능성을 크게 향상시키는 중요한 관행이다!!

3. v-for with v-if

동일 요소에 v-for와 v-if를 함께 사용하지 않는다.

그 이유는 동일한 요소에서 v-if가 v-for보다 우선순위가 더 높기 때문이다. v-if에서의 조건은 v-for 범위의 변수에 접근할 수 없다.

이런식으로 v-for과 v-if를 같이 작성해버리면

이런 오류가 발생한다.

그러면 v-for과 v-if를 같이 사용하는 방법은 없을까?

정답은 바로 computed를 활용하는 방법과 v-for와 <template> 요소를 활용하는 것이다.

1) computed를 활용해 이미 필터링된 목록을 반환하여 반복하도록 설정해보자.

2) v-for와 template 요소를 사용하여 v-if 위치를 이동시켜보자.