서론
주말에 김장을 하느라 매우 힘들었습니다...
본론
반응형 데이터
vue에서는 getter와 setter을 통해 웹에서 결과값을 볼 수 있습니다. getter을 통해 처음 값을 보여주고 setter을 통해 변화된 값을 업데이트하여 리렌더링을 합니다.
ref
전달된 값을 갖게 되고, 이것을 가리키는 단일 속성 .value가 있는 변경 가능한 반응형 ref 객체를 반환합니다.
<script setup>
import {ref} from "vue"
let number = ref(0)
const ChangeNumber = () => {
number.value ++
}
</script>
<template>
<button @click="ChangeNumber">{{number}}</button>
</template>
// 버튼 클릭시 1씩 증가reactive
객체의 반응형 proxy를 반환합니다.
반환된 객체와 중첩된 객체는 Proxy로 래핑되므로, 원본 객체와 동일하지 않습니다.
그러므로 반응형 프락시로만 작업하고, 원본 객체에 의존하지 않는 것이 좋습니다.
<script setup>
import {reactive} from "vue"
let data = reactive({
number: 0,
foo: "안녕"
})
const ChangeData = () => {
data.number ++
}
</script>
<template>
<button @click="ChangeData">{{data}}</button>
</template>
// 버튼 클릭시 1씩 증가 객체형태로 출력
// ref형식도 객체형태로 가능하고 기존의 data.value.number / data.number 의 차이가 있음
v-model
사용자 입력을 받는 폼(form) 엘리먼트 또는 컴포넌트에 양방향 바인딩을 만듭니다.
<script setup>
import { ref } from "vue";
const text = ref("");
const ChangeText = (event) => {
text.value = event.target.value;
};
//v-model
const message = ref("");
const messages = ref("");
</script>
<template>
<input type="text" @input="ChangeText" :value="text" />
<br />
<p>{{ text }}</p>
<hr />
<input v-model="message" />
<p>{{ message }}</p>
<hr />
<textarea v-model="messages"></textarea>
<br />
<p style="white-space: pre-line">{{ messages }}</p>
</template>
이런식으로 가능합니다 기존의 react에서는 useState, useEffect 또한 event의 target.value로 해당 값을 인지를 했습니다.
Vue에서는 양방향 바인딩을 걸어 v-model="변수이름" 을 통해 쉽게 정말 쉽게 만들 수 있습니다.
추가적으로,
<script setup>
import { ref } from "vue";
const message = ref("");
</script>
<template>
<input v-model.lazy="message" />
<p>메시지: {{ message }}</p>
</template>
// 기존에는 값이 변하는 순간마다 상태가 변형이 됩니다.
// .lazy는 input에 값을 입력하면 즉시 상태가 변형되지 않습니다.
// .lazy는 input이 focus에서 벗어난 순간 즉시 상태가 변형이 됩니다.
// react에서 useRef와 동일하며 input이 많이 있을때 사용하면 좋을것 같습니다.IME 문제
기존 메소드를 활용하면 자음 모음이 하나의 글자로 되지 않아도 출력이 됩니다. 즉, 실시간으로 반영이 됩니다.
ex. "간ㄷ" -> "간ㄷ"이 출력됨
하지만 v-model을 사용하면 한국어가 자음 모음이 합쳐져 하나의 글자가 되는 순간 상태변형이 완료됩니다.
ex. "간ㄷ" => "간"이 출력됨
<script>
import {ref} from "vue";
const text = ref("");
const InputMethod = (event) => {
text.value = event.target.value
}
const message = ref("");
</script>
<template>
<input :value="text" @input="InputMethod"/>
<p>{{text}}</p>
<hr/>
<input v-model="message">
<p>{{message}}</p>
</template>정리
기존의 react만 해와서 어려울 것 같았는데 오히려 축약된 느낌이라 vue가 쉽게 느껴집니다.
공부가 마무리 되면 최종적으로 vue3, nodejs, mongodb를 활용해서 간단한 미니 프로젝트를 개발할 생각입니다.