Vue - 렌더링

조건부 렌더링

• v-if, v-else-if, v-else를 형제 요소로 사용할 수 있다

    <div id="app">
      <h1 v-if="isShow">Hello Vue!</h1>
      <h2 v-else-if="[]">Application..</h2>
      <h2 v-else>Good Morning~</h2>
    </div>

• template 태그를 사용하면 template 안에 있는 내용만 출력된다

    <div id="app">
      <h1 v-if="isShow">Hello Vue!</h1>
      <template v-else-if="[]">
        <h2>Application..</h2>
        <p>1234</p>
        <span>987</span>
      </template>
      <h2 v-else>Good Morning~</h2>
    </div>

v-show

• true/false 값에 상관없이 해당요소를 구조적으로 출력하고 화면에 보이는지 아닌지는 CSS로 제어를 한다.
• 연결된 데이터의 true/false값에 따라 css의 display: none으로 바꾸거나 속성과 값을 제거하며 화면에 요소를 보여지거나 보여지지 않게 한다
• 초기 렌더링 비용이 높고 전환 비용이 낮다
• 보여지거나 보여지지 않는 구조가 많을 때 적합
• v-cloak 디렉티브와 함께 사용 권장

    <div id="app">
      <button @click="toggle">Toggle</button>
      <h1 v-show="isShow">Hello Vue!</h1>
    </div>

v-cloak

• 렌더링되어 바인딩 되기 전에 {{}}태그를 숨길 수 있다

    <style>
      [v-clock] {
        display: none;
      }
    </style>
    <div id="app">
      <button @click="toggle">Toggle</button>
      <h1 v-show="isShow" v-cloak>{{ msg }}</h1>
    </div>

v-if

• 조건이 true인 경우에는 해당 요소를 자리에 구조화해서 출력하고 조건이 false인 경우에는 해당 요소를 구조적으로 만들지도 않는다(생성X)
• 초기 렌더링 비용이 낮고 전환 비용이 높다
• 보여지거나 보여지지 않는 구조가 적을 때 적합

    <div id="app">
      <button @click="toggle">Toggle</button>
      <h1 v-if="isShow">Hello Vue!</h1>
    </div>

v-if와 v-for 동시 사용

• v-for를 쓴 앨리먼트에 v-if 사용하는 것을 권장하지 않는다

<ul>
  <li 
    v-for="user in users" 
    v-if="user.isActive" 
    :key="user.id">
    {{user.name}}
</li>
</ul>

• template 태그를 사용하여 같이 사용하면 괜찮다

<ul>
  <template v-for="user in users" :key="user.id">
    <li v-if="user.isActive">{{user.name}}</li>
  </template>
</ul>

---

리스트 렌더링

v-for로 엘리먼트에 배열 매핑하기

<ul id="array-rendering">
  <li v-for="item in items">
    {{item.message}}
  </li>
</ul>

• v-for는 두번째 전달인자에 현재 항목의 인덱스를 제공한다

<ul id="array-rendering">
  <li v-for="(item, index) in items">
    {{parentMessage}} -{{index}} {{item.message}}
  </li>
</ul>

v-for를 사용하여 객체의 속성 반복

<ul id="v-for-object" class="demo">
  <li v-for="value in myObject">{{value}}</li>
</ul>

• 키에 대한 두번째 전달 인자를 제공할 수도 있다

<ul id="v-for-object" class="demo">
  <li v-for="(value, name) in myObject">{{name}}: {{value}}</li>
</ul>

상태유지

• 데이터 항목의 순서가 변경된 경우 항목의 순서와 일치하도록 DOM 요소를 이동하는 대신 Vue는 각 요소를 적절한 위치에 패치하고 해당 인덱스에서 렌더링할 내용을 반영하는지 확인
• 반복되는 DOM 내용이 단순한 경우나 의도적인 성능 향상을 위해 기본 동작에 의존하지 않는 경우를 제외하면 v-for에 key를 추가하는 것이 좋다

<div v-for="item in items" :key="item.id">
  <!-- content-->
</div>

배열 변경 감지

수정 메소드

• push(), pop(), shift(), unshift(), splice(), sort(), reverse()

배열 교체

• 변이 메소드는 호출된 원래 배열을 변경
• filter(), concat(), slice()와 메소드는 배열을 변경하지 않고 새 배열을 반환한다

필터링 / 정렬된 결과 표시

• 원본 데이터를 실제로 수정하거나 교체하지 않고 필터링되거나 정렬된 결과를 표시

const sets = ref([
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
])

function even(numbers) {
  return numbers.filter((number) => number % 2 === 0)
}

<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

숫자 범위에 v-for 사용하기

• v-for는 정수를 사용할 수도 있다
• n은 0부터 시작한다

<span v-for="n in 10">{{ n }}</span>

<template>에서 v-for 사용하기

• v-if와 유사하게 <template> 태그에 v-for를 사용하여 여러 엘리먼트 블록을 렌더링할 수도 있다

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

v-if에 v-for 사용하기

• 같은 노드에 존재할 때 v-if가 v-for보다 우선순위가 높기 때문에 v-if 조건문에서 v-for 변수에 접근할 수 없다

<!--"todo" 속성이 인스턴스에 정의되어 있지 않기 때문에 에러가 발생한다-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

<template> 태그로 감싼 후, v-for를 옮겨서 해결할 수 있다(더 명시적이기도 함)

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

컴포넌트에 v-for 사용하기

컴포넌트에 v-for를 직접 사용할 수 있습니다(key 사용 필수)

<MyComponent v-for="item in items" :key="item.id" />

• 컴포넌트에는 자체적으로 구분된 범위가 있기 때문에 컴포넌틍 데이터를 자동으로 전달하지 않는다.
• 반복된 데이터를 컴포넌트에 전달하려면 props를 사용해야 한다

<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>

 

참고 : https://ko.vuejs.org/guide/essentials/list.html#v-for-with-a-component