Vue 렌더링

Vue 렌더링

 

리스트 렌더링

select와 option태그, 그리고 배열로 이루어진 객체 데이터를 통해 리스트 렌더링을 하는 방법을 알아보자.

우선 data에 아래와 같이 값을 부여하자.

  data() {
    return {
      options: [
        { v: '02', t: '서울' },
        { v: '21', t: '부산' },
        { v: '064', t: '제주' },
      ],
    };
  },

이제 tempalte 태그 안에 아래 와 같이 적자.

<template>
  <div>
    <select>
      <option v-for="(city, i) in options" v-bind:value="city.v" v-bind:key="i">
        {{i}}-{{ city.t }}
      </option>
    </select>
  </div>
</template>

위 코드를 실행하면 0-서울, 1-부산, 3-제주의 세 옵션들이 생성 된 것을 볼 수 있다.

v-for 속성의 기본 구조는 v-for="(item, index) in items" 형태로 items라는 원본 데이터 배열의 각 엘리먼트를 item 으로 받아오는 일을 한다. 이는 아래의 JavaScript의map 함수와도 유사하다고 할수 있다.

items.map((item,index)=>{})

또한 v-for 태그와 함께 쓰여야 하는 것은 key 값이다. 이는 v-bind:key="" 속성으로 부여한다.(이는 :key="" 로도 적을 수 있다.)각 리스트의 key 값은 그 리스트 안에서 고유한 값을 지녀야 한다.

결국 위 코드는 options 배열의 모든 엘레먼트를 순서대로 가져와 option 태그에 넣는다는 의미 이다.

이번에는 select 태그에 value를 부여해보자.

<div>
    <select v-model="jeju">
      <option v-for="(city, i) in options" v-bind:value="city.v" v-bind:key="i">
        {{ i }}-{{ city.t }}
      </option>
    </select>
  </div>
  .
  .
  .
    data() {
    return {
      options: [
        { v: '02', t: '서울' },
        { v: '21', t: '부산' },
        { v: '064', t: '제주' },
      ],
      jeju: '064',
    };
  },

실행시 select의 기본값이 2-제주가 되는 것을 볼수 있다.

이번에는 table 태그를 사용해서 리스트 렌더링을 해보자.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>제품명</th>
          <th>제품가격</th>
          <th>배송비</th>
          <th>카테고리</th>
        </tr>
      </thead>
    </table>
  </div>
</template>
.
.
.
  data() {
    return {
      productList: [
        {
          name: 'electronic keyboard',
          price: 20000,
          delivery: 5000,
          category: 'electronics',
        },
        {
          name: 'vertical mouse',
          price: 40000,
          delivery: 2000,
          category: 'electronics',
        },
        {
         name: 'china vase',
         price: 10000,
         delivery: 2500,
         category: 'floral vase' },
      ],
    };
  },

테이블 태그안에서 반복 되는 것은 tr태그이므로 우선 tr 태그를 아래와 같이 설정해주자.

        <tr v-for="(product, i) in productList" :key="i"></tr>

그 안에는 td 태그가 들어가야한다.

        <tr v-for="(product, i) in productList" :key="i">
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
          <td>{{ product.delivery }}</td>
          <td>{{ product.category }}</td>
        </tr>

위와 같이 설정해준뒤 실행해보면 각 칸에 잘 들어 가 있는 것을 볼 수 있다.

 

렌더링 문법

 

vue에서의 다른 렌더링 문법에는 v-if 와 v-show 가 있다.

위에서 v-for를 살펴봤으니 이제는 v-if를 이용해보자.

<template>
  <div>
    <h1 v-if="h1Render">if h1Render is true, this sentence appears</h1>
  </div>
</template>
<script>
export default {
  name: 'rendingGrammer',
  components: {},
  data() {
    return {
      h1Render: true,
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmouted() {},
  methods: {},
};
</script>

h1Render객체의 값이 true 이니, 화면에는 h1 태그가 보인다. 하지만 h1Render를 false로 설정하면 h1 태그는 더 이상 렌더링 되지 않는다.

vue 에서는 if뿐 만아니라 else 값도 설정 가능하다. 이는 v-else라는 속성으로 부여 할 수 있다.

<template>
  <div>
    <h1 v-if="h1Render">if h1Render is true, this sentence appears</h1>
    <h1 v-else>if h1Render is false, this sentence appears</h1>
  </div>
</template>

위 코드를 실행하면 h1Render의 값이 true일때는 위의 문장이 나타나고, false이면 아래의 문장이 나타난다.

vue에서는 else if 문 역시 사용 가능하다. 이는 v-else-if="" 속성으로 사용가능하다.

<template>
  <div>
    <h1 v-if="type === 'a'">type is a</h1>
    <h1 v-else-if="type === 'b'">type is b</h1>
    <h1 v-else>type is other</h1>
  </div>
</template>
.
.
.
  data() {
    return {
      type: 'a',
    };
  },

type 값을 a로 바꾸면 첫번째 문장이, b로 바꾸면 두번째 문장이, 그리고 a나 b가 아닌 다른 값으로 바꾸면 마지막 문장이 나온다.

이번에는 v-show속성을 사용해 보자.

    <p v-show="pRender">pRender is true</p>
    .
    .
    .
    data() {
        return {
            pRender: true,
    };
  },

이 역시 위에서 boolean 값을 사용한 v-if 속성과 같이, pRender가 true면 렌더링 되고, false면 렌더링 되지 않는다.

v-if 와 v-show는 굉장히 유사해 보이나 둘이 렌더링 방법에서 차이가 있다.

v-if는 조건을 만족한 순간에 html블럭이 생성되고, 조건을 만족하지 않으면 html블럭이 삭제된다. 하지만 v-show는 렌더링은 하지만 해당 엘레먼트에 style= "display : none" 속성을 준다. 직접 실행해보자.

<template>
  <div>
    <h1 v-if="h1Render">h1Render is true</h1>
    <p v-show="pRender">pRender is true</p>
  </div>
</template>
.
.
.
  data() {
    return {
      h1Render: true,
      pRender: true,
    };
  },

이 상태에서 개발자 모드의 elements 탭을보면 아레와 같이 렌더링 된 모습을 볼 수 있다.

<h1>h1Render is true</h1>
<p>pRender is true</p>

이번에는 h1Render, pRender 모두 false 값을 부여하고 실행해보자.

<!--v-if-->
<p style="display: none;">pRender is true</p>

element 탭을 확인하면 위와 같이 렌더링 됨을 확인 할 수 있다.

만약 해당 엘레먼트가 한번 바뀌고 마는 요소라면 v-if를, 자주 변경되는 요소라면 v-show를 쓰는 것이 더 경제적이라고 할 수 있다.