\ubc18\uc751\ud615 ref\ub294 \ub370\uc774\ud130\ub97c \ubc18\uc751\ud615\uc73c\ub85c \ub9cc\ub4e4\uae30 \uc704\ud55c \ud568\uc218<\/strong>\uc785\ub2c8\ub2e4. \uc8fc\ub85c \uc6d0\uc2dc \ud0c0\uc785(string, number, boolean \ub4f1)\uc744 \ubc18\uc751\ud615\uc73c\ub85c \ub2e4\ub8f0 \ub54c \uc0ac\uc6a9\ud558\uba70, \uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c\ub294 \ud15c\ud50c\ub9bf ref\ub294 HTML \uc694\uc18c\ub098 \ucef4\ud3ec\ub10c\ud2b8 \uc778\uc2a4\ud134\uc2a4\uc5d0 \uc9c1\uc811 \uc811\uadfc\ud558\uae30 \uc704\ud55c \uae30\ub2a5<\/strong>\uc785\ub2c8\ub2e4.<\/p>\n Vue.js ref: \ubc18\uc751\ud615 ref vs \ud15c\ud50c\ub9bf ref 1. \ubc18\uc751\ud615 ref \ubc18\uc751\ud615 ref\ub780? \ubc18\uc751\ud615 ref\ub294 \ub370\uc774\ud130\ub97c \ubc18\uc751\ud615\uc73c\ub85c \ub9cc\ub4e4\uae30 \uc704\ud55c \ud568\uc218\uc785\ub2c8\ub2e4. \uc8fc\ub85c \uc6d0\uc2dc \ud0c0\uc785(string, number, boolean \ub4f1)\uc744 \ubc18\uc751\ud615\uc73c\ub85c \ub2e4\ub8f0 \ub54c \uc0ac\uc6a9\ud558\uba70, .value \uc18d\uc131\uc744 \ud1b5\ud574 \uac12\uc5d0 \uc811\uadfc\ud569\ub2c8\ub2e4. \uae30\ubcf8 \uc0ac\uc6a9\ubc95 import { ref } from 'vue' export default { setup() { \/\/ \ub2e4\uc591\ud55c \ud0c0\uc785\uc758 ref \uc0dd\uc131 const count =\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[],"class_list":["post-11210","post","type-post","status-publish","format-standard","hentry","category-language"],"_links":{"self":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11210"}],"version-history":[{"count":2,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11210\/revisions"}],"predecessor-version":[{"id":11212,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11210\/revisions\/11212"}],"wp:attachment":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}.value<\/code> \uc18d\uc131\uc744 \ud1b5\ud574 \uac12\uc5d0 \uc811\uadfc\ud569\ub2c8\ub2e4.<\/p>\n\uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h3>\n
import { ref } from 'vue'\n\nexport default {\n setup() {\n \/\/ \ub2e4\uc591\ud55c \ud0c0\uc785\uc758 ref \uc0dd\uc131\n const count = ref(0)\n const message = ref('\uc548\ub155\ud558\uc138\uc694')\n const isActive = ref(true)\n const items = ref([])\n const user = ref({ name: '\ud64d\uae38\ub3d9', age: 30 })\n\n \/\/ \uac12 \uc77d\uae30\uc640 \uc218\uc815\n console.log(count.value) \/\/ 0\n count.value++ \/\/ 1\n\n message.value = '\ubc18\uac11\uc2b5\ub2c8\ub2e4'\n user.value.name = '\uae40\ucca0\uc218'\n\n return {\n count,\n message,\n isActive,\n items,\n user\n }\n }\n}<\/code><\/pre>\n\ud15c\ud50c\ub9bf\uc5d0\uc11c\uc758 \uc790\ub3d9 \uc5b8\ub798\ud551<\/h3>\n
.value<\/code>\uac00 \ud544\uc218\uc9c0\ub9cc, \ud15c\ud50c\ub9bf\uc5d0\uc11c\ub294 \uc790\ub3d9\uc73c\ub85c \uc5b8\ub798\ud551\ub429\ub2c8\ub2e4.<\/p>\n<template>\n <div>\n <!-- .value \uc5c6\uc774 \uc0ac\uc6a9 -->\n <p>{{ count }}<\/p>\n <p>{{ message }}<\/p>\n\n <!-- \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\uc5d0\uc11c\ub3c4 .value \ubd88\ud544\uc694 -->\n <button @click="count++">\uc99d\uac00<\/button>\n\n <!-- v-model\uc5d0\uc11c\ub3c4 .value \ubd88\ud544\uc694 -->\n <input v-model="message">\n <\/div>\n<\/template><\/code><\/pre>\n\ubc18\uc751\ud615 ref \uc8fc\uc758\uc0ac\ud56d<\/h3>\n
1. \uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c\ub294 \ud56d\uc0c1 .value \uc0ac\uc6a9<\/h4>\n
const count = ref(0)\n\n\/\/ OK\ncount.value = 10\n\n\/\/ \ubc18\uc751\uc131 \uc0c1\uc2e4 : \ub354\uc774\uc0c1 ref \uac1d\uccb4 \uc544\ub2d8\ncount = 10<\/code><\/pre>\n2. reactive \uac1d\uccb4 \uc548\uc758 ref\ub294 \uc790\ub3d9 \uc5b8\ub798\ud551<\/h4>\n
import { reactive, ref } from 'vue'\n\nconst count = ref(0)\nconst state = reactive({\n count \/\/ reactive \uc548\uc5d0\uc11c\ub294 \uc790\ub3d9 \uc5b8\ub798\ud551\n})\n\nconsole.log(state.count) \/\/ 0 (.value \ubd88\ud544\uc694)\nstate.count++ \/\/ \ub3d9\uc791\ud568<\/code><\/pre>\n2. \ud15c\ud50c\ub9bf ref<\/h2>\n
\ud15c\ud50c\ub9bf ref\ub780?<\/h3>\n
\uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h3>\n
<template>\n <input ref="emailInput" type="email" placeholder="\uc774\uba54\uc77c \uc785\ub825" \/>\n <button @click="focusInput">\ud3ec\ucee4\uc2a4<\/button>\n<\/template>\n\n<script>\nexport default {\n methods: {\n focusInput() {\n \/\/ this.$refs\ub85c DOM \uc694\uc18c \uc811\uadfc\n this.$refs.emailInput.focus()\n }\n },\n mounted() {\n console.log(this.$refs.emailInput) \/\/ <input> DOM \uc694\uc18c\n this.$refs.emailInput.focus() \/\/ \uc790\ub3d9 \ud3ec\ucee4\uc2a4\n }\n}\n<\/script><\/code><\/pre>\n\ud15c\ud50c\ub9bf ref \uc8fc\uc758\uc0ac\ud56d<\/h3>\n
1. \ucd08\uae30\uac12\uc740 null<\/h4>\n
const myInput = ref(null)\n\/\/ \ucef4\ud3ec\ub10c\ud2b8 \ub9c8\uc6b4\ud2b8 \uc804\uae4c\uc9c0 null<\/code><\/pre>\n2. onMounted\ub098 \uc774\ud6c4\uc5d0 \uc811\uadfc<\/h4>\n
const emailInput = ref(null)\n\n\/\/ setup \ub2e8\uacc4\uc5d0\uc11c\ub294 \uc811\uadfc \ubd88\uac00\nconsole.log(emailInput.value) \/\/ null\n\n\/\/ onMounted\uc5d0\uc11c \uc811\uadfc\nonMounted(() => {\n console.log(emailInput.value) \/\/ <input> \uc694\uc18c\n emailInput.value.focus()\n})<\/code><\/pre>\n\uc694\uc57d \ube44\uad50\ud45c<\/h2>\n
\n\n
\n \n\ud2b9\uc9d5<\/th>\n \ubc18\uc751\ud615 ref<\/th>\n \ud15c\ud50c\ub9bf ref<\/th>\n<\/tr>\n<\/thead>\n \n \uc120\uc5b8 \ubc29\uc2dd<\/strong><\/td>\n const data = ref(value)<\/code><\/td>\n<div ref="name"><\/code><\/td>\n<\/tr>\n\n \uc8fc\uc694 \uc6a9\ub3c4<\/strong><\/td>\n \ubc18\uc751\ud615 \uc0c1\ud0dc \uad00\ub9ac<\/td>\n DOM\/\ucef4\ud3ec\ub10c\ud2b8 \uc811\uadfc<\/td>\n<\/tr>\n \n \uac12\uc758 \ud0c0\uc785<\/strong><\/td>\n \ub370\uc774\ud130 \uac12<\/td>\n DOM \uc694\uc18c \ub610\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc778\uc2a4\ud134\uc2a4<\/td>\n<\/tr>\n \n \ucd08\uae30\uac12<\/strong><\/td>\n \uc6d0\ud558\ub294 \uac12<\/td>\n null<\/code><\/td>\n<\/tr>\n\n \uc811\uadfc \uc2dc\uc810<\/strong><\/td>\n \uc989\uc2dc \uac00\ub2a5<\/td>\n onMounted<\/code> \uc774\ud6c4<\/td>\n<\/tr>\n\n \uc2a4\ud06c\ub9bd\ud2b8 \uc0ac\uc6a9<\/strong><\/td>\n .value<\/code>\ub85c \uc811\uadfc<\/td>\n.value<\/code>\ub85c DOM \uc811\uadfc<\/td>\n<\/tr>\n\n \ud15c\ud50c\ub9bf \uc0ac\uc6a9<\/strong><\/td>\n \uc790\ub3d9 \uc5b8\ub798\ud551<\/td>\n \uc18d\uc131\uc73c\ub85c\ub9cc \uc0ac\uc6a9<\/td>\n<\/tr>\n \n \uc8fc\uc694 \uc0ac\ub840<\/strong><\/td>\n \ud3fc \ub370\uc774\ud130, \uc0c1\ud0dc, \uce74\uc6b4\ud130 \ub4f1<\/td>\n focus()<\/code>, scroll()<\/code>, \ub77c\uc774\ube0c\ub7ec\ub9ac \uc5f0\ub3d9<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"