[Vue] ref 함수

ref()

반응형 상태(데이터)를 선언하는 함수 (Declaring Reactive State)

 

ref() 사용

인자를 받아 .value 속성이 있는 ref 객체로 wrapping하여 반환한다.

ref로 선언된 변수의 값이 변경되면 해당 값을 사용하는 템플릿에서 자동으로 업데이트한다.

인자는 어떠한 타입도 가능하다.

const {createApp, ref } = Vue

const app = createApp({
    const message = ref('Hello, Vue!')
    console.log(message) // ref 객체
    console.log(message.value)
})

 

템플릿 렌더링

• 반환된 객체의 속성은 템플릿에서 사용할 수 있다.
• Mustache syntax(콧수염 구문)를 사용하여 메시지 값을 기반으로 동적 텍스트를 렌더링한다.
• JavaScript 표현식도 사용 가능하다.

<!-- Mustache syntax 사용 예시 -->
<p>{{ message }}</p>
<!-- JavaScript 표현식 사용 예시 -->
<p>{{ message.split('').reverse().join('') }}</p>

 

 

템플릿의 참조에 접근하려면 setup 함수에서 선언 및 반환이 필요하다.

템플릿에서 ref를 사용할 때는 .value를 작성할 필요 없다. (automatically unwrapped)

 

---

 

참고

• 공식 문서 - 반응성 기초
• 공식 문서 - 템플릿 참조
• Cracking Vue - ref 소개