랜더링(v-for, v-if, v-show)

리스트 랜더링(v-for)

select의 option, table의 tr 데이터 등 반복되는 객체를 처리할 떄 많이 사용함

쇼핑몰에서 보게되는 제품 리스트처럼 동일한 UI 패턴에 데이터만 다르게 처리되는 그런 부분들이 다중 데이터를 이용해서 처리되는 부분이라고 생각하면 됨

 

배열 데이터는 v-for 디렉티브를 이용해서 바인딩할 수 있음

반복적으로 랜더링할 html 태그에 v-for 디렉티브를 사용하면 배열에 있는 데이터 수만큼 html태그를 반복적으로 랜더링하게 됨

 

v-for="(item, index) in items"

위와 같은 형식으로 사용함

여기서 items는 데이터 배열임

v-for를 통해 배열을 하나씩 읽어와서 배열의 각 아이템을 item으로, 배열의 현제 index를 index로 반환해줌

index를 사용할 일이 없다면 생략하고 v-for="item in items"로 사용해도 됨

<template>
  <table>
    <tr>
      <td>번호<td>
      <td>이름<td>
    </tr>
    <!-- <tr v-for="person in people"> -->
    <tr v-for="(person, i) in people">
      <td>{{ person.number }}<td>
      <td>{{ person.name }}<td>
    </tr>
  </table>
</template>
<script>
  export default {
    data() {
      return {
        people: [
          {
            number: 1,
            name: '홍길동'
          },
          {
            number: 2,
            name: '김길동'
          },
          {
            number: 3,
            name: '오길동'
          },
        ]
      }
    },
  }
</script>

번호	이름
1	홍길동
2	김길동
3	오길동

 

랜더링 문법(v-if, v-show)

  - v-if 디렉티브

<h1 v-if="bRender">bRender가 true이면, h1 블록이 화면에 보이게 됩니다.</h1>

   : v-if 디렉티브에 true가 리턴되면 html 블록이 랜더링 됨. 반대로 false인 경우 화면에 랜더링 되지 않음

 

<h1 v-if="result == 1">result는 1입니다.</h1>
<h1 v-else-if="result == 2">result는 2입니다.</h1>
<h1 v-else>result는 1과 2가 아닙니다.</h1>

   : v-else-if 디렉티브를 사용해서 else if 표현식을 사용할 수 있다

 

 - v-show 디렉티브

<h1 v-show="bShow">bShow가 true이면 현재 블록이 화면에 보이게 됩니다.</h1>

 

  - v-if와 v-show의  차이점

   : 둘다 비슷해 보이지만, 내부적으로 랜더링 되는 방식에 큰 차이가 있다.

   : v-if의 경우 조건을 만족하면 그 순간 html 블록이 생성되고, 조건에 만족하지 않으면 html 블록은 삭제가 됨

   : 하지만 v-show의 경우 조건 만족 여부에 상관없이 무조건 html 블록이 생성되며, 조건을 만족하면 css display를 이용해서 화면에 보이게 되고, 조건을 만족하지 않으면 화면에서 숨기도록 처리가 됨. 즉, 조건의 만족 여부에 상관없이 무조건 랜더링이 됨

 

   : v-if는 해당 블록에 toggle이 일어날 때, v-show보다 더 많은 자원을 사용하게 됨. 왜냐하면 v-if는 실제로 해당 블록 전체를 생성했다가 삭제하기 때문임.

 

v-if와 v-show를 사용할 때는 해당 html 블록이 화면 내에서 자주 toggle이 일어나면 v-show를 사용하고, toggle이 일어나느 빈도가 적다면 v-if를 사용하는 것이 좋다.