GeehDev

반응형 데이터Vue에서 반응형 데이터(Reactivity) 란, 데이터가 변경될 때 자동으로 UI가 업데이트되는 데이터를 의미한다.데이터가 변하거나 특정 조건이 되었을 때 직접 UI에 이를 적용해주던 기존 방식보다 훨씬 간편하게 UI를 조작 및 관리할 수 있다.기존방식 이름 : Vue의 반응형 데이터 방식 이름 : {{ userNm }} Vue3에서는 이러한 반응형 데이터를 사용하는 대표적인 방법으로 ref(), reactive() 가 있다.ref() {{ count }} +1reference 라는 의미로 반응형 데이터를 만들고, 해당 값을 참조할 수 있도록 해주는 함수기본형, 객체, 배열 등의 모든 자료형을 감쌀 수 있다.주로 기본형 타입을 담는데 유리하다.생성 후 값에 ..

Vue 탬플릿 문법탬플릿(Template)란 기본적으로 UI를 구성하는 틀로, 웹 개발에서는 HTML을 기반으로 화면을 구성하는 요소를 탬플릿이라 볼 수 있다.Vue에서는 단순 정적 탬플릿이 아니라 데이터의 변화에 따라 동적으로 반응하여, 반응형 데이터를 바인딩할 수 있도록 설계되어 있다.1. Mustache 문법{{ message }} {{}} 형식으로 작성하는 문법으로, 데이터를 바인딩할 때 쓰인다.{{ 변수 }} 형식으로 작성하여 변수에 들어있는 데이터를 화면에 표시해주는 역할을 한다.📌나 Mustache 라는걸 들어봤어요! 어디서 들었더라?Mustache.js라는 탬플릿엔진에서 쓰이던 문법으로 원래는 HTML을 그리는 시점에 들어온 데이터를 바인딩하는 정적 데이터 바인딩 문법이었으나, Vue에서..