[vue 3] 09.DOM 요소에 직접 접근

이번 포스트에서는 vue에서 DOM 요소에 직접 접근하기 위한 방법에 대해 살펴보자.

 

DOM 요소에 직접 접근

 

ref

한때 javascript 라이브러리의 대명사였던 jquery의 가장 큰 장점 중 하나는 편리하게 DOM 요소를 관리한다는 점이었다. vue에서는 직접적으로 DOM 요소에 접근에서 사용하는 것을 지양한다.  model과 view가 viewmodel을 통해서 연결되기 때문에 사실 거의 필요가 없다.

하지만 아주 가끔 DOM 요소를 지정해서 동작해야할 필요가 있는데 이를 위해서 template 영역에서 ref 속성을 이용해서 요소에 표시해준다.

<div id="app">
  <h2>login</h2>
  <input type="text" v-model="user.id" @keyup.enter="pass.focus()" />
  <input type="text" v-model="user.pass" ref="pass" @keyup.enter="login" />
</div>

위 코드는 user.id와 연결된 첫 번째 <input>에서 enter 키가 눌렸을 때 pass로 지정된 DOM 요소에 포커스를 주는 코드이다. 여기서 pass는 두 번째 <input> 요소로 ref='pass'로 지정되어있음을 확인할 수 있다.

 

script 영역에서 ref로 지정된 DOM 요소에 접근하기 위해서는 반응성에서 사용했던 ref를 사용하는데 파라미터로는 null을 넘겨주고 ref 의 이름(여기서는 pass)로 변수 이름을 선언해주면 된다.  사용법은 반응성 ref를 사용할 때 처럼 value 속성을 이용해서 값에 접근할 수 있다.

<script>
const { createApp,  ref } = Vue;
createApp({
  setup() {
    const user = ref({});
    const pass = ref(null);
    console.log('이 시점의 pass', pass.value);
    const login = () => {
      alert(user.value.id + " : " + user.value.pass +" : " + pass.value);
    };
    return { user, pass, login,};
  },
}).mount("#app");
</script>

주의할 점은 ref를 사용하는 시점이다. 위의 경우는 login 메서드에서 사용한 pass는 값이 있겠지만 setup에서 사용한 pass는 아직 app이 mount 되기 전이므로 사용할 수 없다. 

만약 setup 후에 처리해야 하는 내용이 있다면 onMount 라는 life cycle hook에서 처리해야 한다.

 

v-for와 ref

v-for 문장에서 즉 여러 개의 ref를 사용하려는 경우는 변수 선언 시에 ref의 파라미터로 null 대신 []를 전달하면 된다.

const lis =ref([]);

template에서는 기존과 동일하게 lis라는 이름으로 ref를 지정해서 사용한다.

<ul>
  <li v-for="(item) in 5" :key="item" ref="lis">{{item}}</li>
</ul>