[vue] ref란?

vue의 ref는 반응형(reactive) 상태를 만드는 데 사용되는 기능이다.

 

1. 반응형이란?

변수가 반응형인 경우, vue에서 다음과 같은 기능을 사용할 수 있다.

1) template에서 {{ 변수명 }} 사용 → UI 자동 업데이트

- 변수가 반응형이 아닌 경우, 변수의 값이 변경되어도 UI에는 반영되지 않는다.

2) 관련된 computed 값 자동 재계산

3) watch로 변경 감지 가능

 

 

2. ref 사용 방법

1) 선언

//문자, 숫자
const stringNumberRef = ref('');

//boolean
const isTrue = ref(true);

//배열
const arrayRef = ref([]);

//객체
const emptyObject = ref(null);
const filledObject = ref({
    key1: '',
    key2: '',
    key3: ''
});

 

2) watch와 함께 사용

watch(stringNumberRef, () => {
    somefunction();
});

 

3) computed와 함께 사용

const computedValue = computed(() => {
    filledObject.value.forEach(proc => {
        key1: '1',
        key2: '2',
        key3: '3'
    });
});

 

 

3. 주의점

ref()는 값을 반응형 Ref 객체로 래핑한 것으로, 실제 값은 ref 개체의 .value 속성에 저장된다.

템플릿 안에서는 자동으로 .value가 언래핑 되지만, 스크립트 내에서는 명시적으로 .value를 사용해야 한다.