누구나 이해할 수 있는 Vue 3 컴포지션 API – 30분 핵심 정리
- Vue 3에서 새로운 구성 API를 사용하여 코드를 간결하고 유연하게 작성할 수 있습니다. 🧪
script setup
구문은 Vue 3 컴포넌트의 기본적인 구조이며 변수, 함수, 옵션 등을 선언하는 곳입니다. 🗂️
ref
함수를 사용하면 반응형 변수를 선언하여 데이터 변화에 따라 컴포넌트가 자동으로 업데이트됩니다. ✨
- 재단어 ({})는 변수 값을 직접 화면에 표시하는 데 사용됩니다. DISPLAY
v-model
은 입력 값을 변수와 동기화하여 실시간 업데이트를 제공합니다. 🔄
- 데이터 바인딩은 데이터를 화면에 표시하고 데이터 변화에 따라 화면을 자동으로 업데이트하는 것입니다. 🔀
- Vue 에서는 '일반 변수'와 'state 변수'가 있으며, state 변수는 반응성을 제공하여 데이터 변경 시 화면이 즉각적으로 업데이트됩니다. 🌟
V-for
디렉티브는 리스트 형태의 데이터를 반복하여 표시하는 데 사용됩니다. 🔁