[Vue.js] ref, reactive, v-if, v-for

 ※ 이 글에서 다룬 기반기술, 프론트엔드, 백엔드, 데브옵스 등 풀스택 개발 지식은 모두 한화시스템 Beyond SW Camp 12기에서 배운 내용을 복습한 것입니다.

 

1. ref

ref는 기본 타입의 값을 이용해 반응성을 가진 참조형 데이터를 생성할 때 사용

ref의 단점은 직접 데이터를 이용하지 못하고 value 속성을 통해 접근해야 한다.

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);  // 기본 데이터 타입에 ref 사용

    const increment = () => {
      count.value++;  // 값을 변경할 때는 .value를 사용
    };

    return {
      count,
      increment
    };
  }
}

2. reactive

reactive는 기본 타입의 값을 반응성을 가지는게 아니라 객체에 대해 반응성을 가지도록 한다.

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      name: 'Vue'
    });

    const increment = () => {
      state.count++;  // .value 없이 직접 변경
    };

    return {
      state,
      increment
    };
  }
}

---

1. v-if

v-if는 조건에 부합되지 않을 경우 렌더링을 수행하지 않는다.

<div v-if="isVisible">
  이 내용은 isVisible이 true일 때만 보인다.
</div>

2. v-for

반복적인 데이터를 렌더링 하기 위해서는 v-for을 사용한다.

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

v-for에서 key는 반복되는 항목을 구별하기 위해 사용되는 고유한 값이다. key를 설정하면 Vue가 변경된 부분만 업데이트할 수 있어 성능이 향상된다.