Vue를 처음 시작하면 가장 먼저 마주치는 친구가 있습니다. 바로 중괄호 두 개 {{ }} 인데요. 어려운 말로는 Text Interpolation(텍스트 보간법) 이라고 하지만, 쉽게 말해 "데이터 꽂아넣기" 기술입니다.

1. 콧수염 문법 (Mustache Syntax) 🥸

생김새가 콧수염 같다고 해서 **머스태시(Mustache)**라고도 불러요. HTML은 뼈대일 뿐이고, 실제 내용은 자바스크립트에서 관리하잖아요? 이 {{ }}를 사용하면 자바스크립트의 변수를 HTML 화면에 바로 출력할 수 있습니다.

쉽게 이해하기 👇

• HTML: 구멍 뚫린 신청서 ("이름: (빈칸)")
• Script: 내 정보 ("김준하")
• Interpolation: 빈칸에 내 이름을 쏙 집어넣는 것!

2. 이게 왜 강력한가요? (핵심은 반응성! ✨)

단순히 글자만 채워주는 게 아닙니다. Vue의 가장 큰 매력이 여기서 나옵니다.

• 우리가 자바스크립트에서 데이터(subscribe) 값을 수정하면?
• HTML을 건드리지 않아도 화면의 숫자가 알아서 바뀝니다. (새로고침 X)
• 이걸 반응성(Reactivity) 이라고 부릅니다. 우린 그냥 데이터만 신경 쓰면 되는 거죠.

3. 실전 코드 예제 💻

스크립트 (데이터 창고)

JavaScript

<script setup> // 변수에 데이터를 담아둡니다. const channel = "왕초보 채널"; const subscribe = 2677; </script>

템플릿 (보여지는 화면)

HTML

`<template> <h1>채널명: {{ channel }}</h1>

<p>구독자 수: {{ subscribe }}</p> </template>`

💡 한 줄 요약

HTML 코드 안에 {{ }}를 쓰고 변수명을 넣으면, 스크립트의 데이터가 실시간으로 화면에 꽂힌다!

1. Options API