[Eric's Vue] ref, $refs 이용해서 DOM 요소 및 자식 컴포넌트 접근 방법 🔗

Vue.js에서는 일반적으로 데이터를 바인딩하여 DOM 요소를 제어합니다.
하지만 경우에 따라서, DOM 요소나 자식 컴포넌트에 직접 접근해야 하는 상황이 발생할 수 있습니다.
이때 Vue.js에서 제공하는 ref $refs를 사용하면 원하는 요소에 쉽게 접근할 수 있습니다. 
 

✅ ref ?

ref는 Vue 템플릿 안에서 특정 DOM 요소나 자식 컴포넌트에 대한 참조를 생성하기 위한 속성입니다. ref 속성을 사용하려면 템플릿의 해당 요소나 컴포넌트에 ref를 추가하고, 고유한 이름을 할당합니다. 이렇게 하면 해당 요소나 컴포넌트에 대한 참조가 생성되며, Vue 인스턴스 내에서 해당 참조를 사용할 수 있게 됩니다.

✅ $refs ?

$refs는 Vue 컴포넌트에서 특정 DOM 요소나 자식 컴포넌트에 대한 참조를 저장하는 데 사용됩니다. $refs를 사용하면 컴포넌트에서 직접적으로 DOM 요소를 조작하거나, 자식 컴포넌트의 메소드를 호출하는 등의 작업을 수행할 수 있습니다.
 
 

📄 ref $refs 사용 방법

 
1. DOM 요소나 자식 컴포넌트에 ref 속성을 추가합니다. 속성값은 고유한 문자열로 지정해야 합니다.

<input ref="inputElement" type="text" />
<child-component ref="childComponent"></child-component>

 
2. 해당 컴포넌트 내에서 this.$refs 객체를 사용하여 해당 요소에 접근할 수 있습니다.
 

mounted() {
  // DOM 요소에 접근
  this.$refs.inputElement.focus();

  // 자식 컴포넌트에 접근
  this.$refs.childComponent.someMethod();
}

 
 

🥲 $refs의 단점

 
1. 반응성이 없음
  $refs는 Vue.js의 반응성 시스템에서 제외되어 있습니다. 즉, $refs를 사용하여 참조를 변경해도 Vue.js는 이를 감지하지 못하며, 따라서 해당 참조와 관련된 계산이나 렌더링 업데이트가 이루어지지 않습니다.
이러한 이유로 $refs를 주로 DOM 요소에 직접 접근하거나, 자식 컴포넌트에 일회성으로 메시지를 전달하는 데 사용하는 것이 적합합니다.
 
2. 초기화 시점에 참조가 없을 수 있음
  $refs 참조는 컴포넌트가 마운트되고 DOM이 렌더링된 이후에만 사용할 수 있습니다. 따라서 컴포넌트의 생성 과정 중에는 $refs를 사용하여 참조하려는 요소에 접근할 수 없습니다. 이를 해결하기 위해, 일반적으로 mounted 라이프사이클 훅에서 $refs를 사용합니다.
 
3. 과도한 사용으로 인한 코드 가독성 저하
  $refs를 과도하게 사용하면 Vue.js의 데이터 흐름과 관련된 코드 가독성이 저하될 수 있습니다. Vue.js는 데이터 흐름을 명확하게 하기 위해 데이터 바인딩을 사용하는데, $refs를 사용하면 이러한 데이터 흐름이 불명확해질 수 있습니다. 따라서 $refs 사용은 최소화하고, 필요한 경우에만 사용하는 것이 좋습니다.
 
 

✅ 결론

  Vue.js의 $refs를 사용하면 DOM 요소나 자식 컴포넌트에 쉽게 접근할 수 있지만, 반응성이 없고 초기화 시점에 참조가 없을 수 있으며 코드 가독성이 저하될 수 있습니다. 이러한 단점을 고려하여 $refs를 적절하게 사용하면, Vue.js에서 DOM 조작 및 자식 컴포넌트와의 상호작용을 보다 효율적으로 수행할 수 있습니다.