Input 에 입력한 값에 대해 접근하는 방식에 대해 알아보자.
v-model을 활용한 것은 저번에 다루어보았으니 넘어가고,
아래는 input에 입력한 값을 event.target.value로 받아 저장하고
버튼을 클릭하면 그 값을 message로 보내주어 출력하는 방식이다.
<section id="app">
<h2>How Vue Works</h2>
<input type="text" @input="saveInput" />
<button @click="setText">Set Text</button>
<p>{{ message }}</p>
</section> data() {
return {
currentUserInput: "",
message: "Vue is great!",
};
},
methods: {
saveInput(event) {
this.currentUserInput = event.target.value;
},
setText() {
this.message = this.currentUserInput;
},
},그렇다면 ref는 어떻게 사용할까?
<section id="app">
<h2>How Vue Works</h2>
<input type="text" ref="userText" />
<button @click="setText">Set Text</button>
<p>{{ message }}</p>
</section>methods: {
saveInput(event) {
this.currentUserInput = event.target.value;
},
setText() {
// 기존 @input에 접근하는 방식 : this.message = this.currentUserInput;
// ref로 접근하는 방식
this.message = this.$refs.userText.value
},
},ref는 react를 했을때도 다루어봤던 기능인데, 쉽게 말해서 주시하고 있다고 생각하면 된다. (정확히는 reference 참조) ref는 모든 html 요소에 접근 가능하다는 장점이있다.
위에서는 input에 ref="userText"를 걸어서 input을 주시하는 상태이고 여기서 "userText"가 key가 된다.
methods로 내려와서 setText함수에 this.$refs.userText.value를 사용하면 input값을 message에 적용하게 되는데, 여기서 $refs는 vue의 내장 프로퍼티를 사용하기 위해 쓰는 구문이고(vue 내장 프로퍼티 앞에는 $가 붙는다) userText로 키를 알려주고 value는 js의 순수 프로퍼티이기 때문에 $없이 사용할 수 있다.
위의 두 가지 방법은 겉으로 보면 똑같은 기능을 하고 있다.
두 가지의 차이점은 뭘까?
ref는 모든 키값을 참조하는 것이 아니라 필요할 때만 그 값을 가져온다.
불필요한 리렌더링을 막는것이다.
하지만 ref를 남용하는 것도 data 불일치를 불러올 수 있다고 한다.
정리
ref를 통해 html 요소에 접근이 가능하다.
ref는 불필요한 리렌더링을 막지만, 남용 시 data 불일치를 야기할 수 있다.
vue의 내장 프로퍼티를 사용할땐 $를 붙인다.
