[Udemy Vue 완벽가이드 Section5] 64. Ref 활용하기

# input 요소에서 입력값을 가져오는 방법

input 요소로부터 값을 가지고 오는 방법은 여러가지가 있다.

지금까지는 모든 키 입력에 대해 input 이벤트를 수신하여 saveInput 메서드가 실행되도록 하였다.

<!--index.html-->
<input type="text" @input="saveInput" />
<button @click="setText">Set Text</button>
<p>{{ message }}</p>

 

saveInput 메서드를 통해 해당 input의 현재값을 data 프로퍼티인 currentUserInput에 저장한 다음, 해당 프로퍼티를 이용해 입력된 값을 message로 할당하는 방식.

//app.js
 data() {
    return {
      currentUserInput: "",
      message: "Vue is great!",
    };
  },
  methods: {
    saveInput(event) {
      this.currentUserInput = event.target.value;
    },
    setText() {
      this.message = this.currentUserInput;
    },
  },

정리하면, input 입력창에 입력 → '모든 키 입력에 대해' input 이벤트 수신 → saveInput 메서드 실행 → 입력값을 data 프로퍼티인 currentUserInput에 저장 → 'Set Text'버튼 클릭 → setText 메서드 실행 → currentUserInput 값을 message값에 저장 → 화면에 출력

 

 

 

다른 방법으로는, v-model을 사용해서 '모든 키 입력에 대해' currentUserInput 프로퍼티에 바로 바인딩 하는 방식이 있다.

<input type="text" v-model="currentUserInput">

 

어떤 방식을 사용하든, 기본적으로 사용자의 모든 키 입력을 출력한다.

이렇게 사용자가 입력한 값이 모두 필요할 때도 있지만, 가끔 전부 알 필요가 없을 때도 있다.

 

Vue에는 '항상'이 아니라 '필요할 때만' DOM요소로부터 값을 가지고 오는 기능이 있다.

→ ref 기능

 

이벤트리스너를 추가할 수도 있지만, 지금은 필요없으므로 이벤트리스너 대신 특수 속성, 즉 ref 속성을 이 요소에 추가해보자.

v-for에서 사용했던 key속성과 마찬가지로, ref속성은 기본 HTML 속성이 아니다. 그래서 브라우저는 모르지만 Vue는 이해하는 속성이다.

 

ref속성에 값을 입력하는데, 이 값은 내가 선택한 '문자열 식별자'가 된다. 내가 원하는 걸 작성하면 된다.

예를 들어, userText라고 값을 입력해보자.(식별자가 'userText'가 된다.)

<input type="text" ref="userText">

물론, input요소 이외에도 p, h, section, input, textarea 등 다른 HTML 요소에 ref를 추가할 수 있다. 

 

 

# ref 속성 사용이유

그럼 이 ref 속성을 왜 사용할까?

Vue는 ref를 감지하고 내부에 이를 저장하고, JavaScript 코드에서 해당 input요소에 액세스를 갖도록 한다.

 

현재, setText 메서드에서 입력한 값을 사용하는데(this.message = this.currentUserInput), 앞서 사용한 방식 외에 this.message = this.$refs 로 설정해보자.

 

$refs는 Vue가 지원하는 프로퍼티이다. (Vue가 지원하는 모든 프로퍼티는 내장 프로퍼티임을 표시하기 위해 $로 시작한다.)

이는 key-value 쌍으로 이루어진 객체로, 이때 key는 template에서 설정한 ref 식별자가 된다. 

이 경우, "userText"가 key가 된다.

//app.js
  methods: {
    setText() {
      this.message = this.$refs.userText;
      console.log('userText', this.$refs.userText)
    },
  },

 

이렇게 하면 해당 input요소의 DOM 객체를 가리키는 것이 되고, DOM 요소에 액세스 할 때 순수 JavaScript에서도 사용할 수 있는 JavaScript 객체가 된다.

이렇게 전체 input 요소에 대한 액세스를 얻을 수 있다.

 

어떤 작업인지 이해가 쉽도록 console.log로 보자. 

Set Text버튼을 누르면, setText메서드가 실행되어 input 요소 전체가 출력되는 것을 볼 수 있다.

 

 

이번에는 console.log 대신, console.dir를 이용해보자.

Set Text 버튼을 누르면 객체로 나온다.

해당 input 요소에 있는 모든 프로퍼티를 JavaScript 객체로 표현한 것.

 

value 프로퍼티를 보면 알 수 있듯이, console.dir로 출력한 객체는 event.target을 통해 액세스한 것과 동일한 객체이므로 value 프로퍼티에도 액세스 할 수 있다.

 

하지만 모든 키 입력에 대해서가 아니라 setText가 실행되었을 때만 이루어진 작업이므로, Set Text 버튼을 클릭할 때만 해당한다.

이제 this.$refs.userText에도 value에 액세스 할 수 있으니, value 추가 후 새로고침 해보자.

//app.js
  methods: {
    setText() {
      this.message = this.$refs.userText.value;
    },
  },

 

input창에 입력 후, Set Text버튼을 클릭하면 이전과 같이 잘 작동한다.

 

하지만 모든 키 입력에 대해 메서드가 실행되어 data 프로퍼티를 변경하고 출력하는 것이 아닌, ref기능을 통해 필요할 때만  추출해서 쓸 수 있다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.