Vue.js에서 템플릿 참조 변수를 사용하는 방법은 무엇인가요?

Q1: Vue.js에서 템플릿 참조 변수(Template Ref)란 무엇인가요?
템플릿 참조 변수는 Vue 템플릿 내 DOM 요소나 컴포넌트 인스턴스를 직접 참조할 수 있도록 해주는 특별한 변수입니다. 이를 통해 자바스크립트 코드에서 해당 요소를 직접 조작하거나 메서드를 호출할 수 있습니다.

---

Q2: 템플릿 참조 변수를 어떻게 선언하나요?
템플릿 내 원하는 요소 또는 컴포넌트에 `ref` 속성을 붙이고 원하는 이름을 할당하면 됩니다. 예:
```html


```

---

Q3: 템플릿 참조 변수에 접근하려면 어떻게 하나요?
Vue 2에서는 `this.$refs.변수명`으로 접근합니다. 예:
```js
this.$refs.myInput.focus();
```

Vue 3의 Composition API에서는 `ref`를 `template`에 선언한 후, `setup` 함수 내에서 `ref`를 선언하고 `onMounted` 등 훅에서 `template refs`를 받아옵니다. 예:
```js
import { ref, onMounted } from 'vue';

export default {
setup() {
const myInput = ref(null);

onMounted(() => {
myInput.value.focus();
});

return { myInput };
}
}
```
템플릿에서는:

```html

```

---

Q4: 템플릿 참조 변수는 언제 사용할 수 있나요?
- DOM 요소에 직접 접근해야 할 때 (예: 포커스 제어, 스크롤 조작)
- 자식 컴포넌트의 공개 메서드 호출이 필요할 때
- 어떤 동작이 Vue 데이터 바인딩만으로는 어려울 때

---

Q5: 템플릿 참조 변수 사용 시 주의할 점은?
- 템플릿 내부의 DOM이 렌더링된 이후에만 존재하므로, 접근 시점은 `mounted`나 `onMounted` 이후여야 합니다.
- ref는 reactive하지 않으니, 템플릿에서 직접 참조하지 말고 변수의 `.value`를 사용하세요(vue3).
- `$refs`는 보통 낮은 수준의 조작에 사용하며, 가능하면 데이터 중심 바인딩 방식이 좋습니다.

---

Q6: 템플릿 참조 변수로 컴포넌트 인스턴스에 접근하면 무엇을 할 수 있나요?
컴포넌트 내 공개한 메서드나 속성에 접근할 수 있습니다. 예를 들어 자식 컴포넌트에 `methods: { open() { ... } }`가 있으면:
```js
this.$refs.childComponent.open();
```

---

요약:
- 템플릿 ref는 `ref="name"`으로 선언
- Vue 2: `this.$refs.name`으로 접근
- Vue 3: `ref(null)` 선언 후 template에 `ref="name"`, setup 내에서 `refs` 변수 사용
- DOM 조작 또는 자식 컴포넌트 메서드 호출 시 활용
- 접근 시점은 마운트 이후여야 하며, reactive하지 않음을 명심할 것

---

이상으로 Vue.js에서 템플릿 참조 변수를 선언하고 사용하는 방법에 관한 FAQ였습니다.

Vue.js에서 Suspense 컴포넌트는 무엇인가요?

Vue.js에서 Composition API란 무엇인가요?

Vue.js에서 템플릿 참조 변수(Template Reference Variable)는 Vue 컴포넌트의 템플릿 내에서 DOM 요소나 자식 컴포넌트에 직접 접근할 수 있는 방법을 제공합니다. 이를 통해 Vue 인스턴스의 데이터나 메서드에 접근하지 않고도 특정 요소에 대한 조작이나 정보를 얻을 수 있습니다. 템플릿 참조 변수는 `ref` 속성을 사용하여 정의됩니다. 템플릿 참조 변수 사용 방법 1. 템플릿 참조 변수 정의하기 : 템플릿 내에서 `ref` 속성을 사용하여 변수를 정의합니다. 이 변수는 Vue 인스턴스의 `$refs` 객체를 통해 접근할 수 있습니다. ```html <template> <div> <<a href='https://sangseek.com/sangseeks/input/ko'>input</a> ref="myInput" type="text" /> <button @click="focusInput">Focus Input</button> </div> </template> ``` 2. 템플릿 참조 변수 <a href='https://sangseek.com/sangseeks/접근하기/ko'>접근하기</a> : 정의한 `ref` 변수는 Vue 인스턴스의 메서드 내에서 `$refs`를 통해 접근할 수 있습니다. `$refs`는 객체 형태로, 각 `ref` 이름을 키로 사용하여 해당 DOM 요소나 컴포넌트 인스턴스에 접근할 수 있습니다. ```javascript <script> export default { methods: { focusInput() { this.$refs.myInput.focus(); // input 요소에 포커스 } } } </script> ``` 3. 자식 컴포넌트에 대한 접근 : 템플릿 참조 변수는 자식 컴포넌트에도 사용할 수 있습니다. 이 경우, `$refs`를 통해 자식 컴포넌트의 메서드나 데이터에 접근할 수 있습니다. ```html <template> <div> <child-component ref="child"></child-component> <button @click="callChildMethod">Call Child Method</button> </div> </template> ``` ```javascript <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { callChildMethod() { this.$refs.child.someMethod(); // 자식 컴포넌트의 <a href='https://sangseek.com/sangseeks/메서드 호출/ko'>메서드 호출</a> } } } </script> ``` 템플릿 참조 변<a href='https://sangseek.com/sangseeks/수의/ko'>수의</a> 특징 - <a href='https://sangseek.com/sangseeks/반응성/ko'>반응성</a> 없음 : 템플릿 참조 변수는 Vue의 반응성 시스템과는 별개로 작동합니다. 즉, `$refs`에 저장된 값은 Vue의 반응형 데이터와 연결되어 있지 않기 때문에, DOM 요소의 상태가 변경되더라도 `$refs`는 자동으로 업데이트되지 않습니다. - DOM 요소에 직접 접근 : `$refs`를 사용하면 Vue의 데이터 바인딩을 우회하여 DOM 요소에 직접 접근할 수 있습니다. 이는 특정 상황에서 유용하지만, Vue의 반응형 시스템을 활용하는 것이 더 바람직한 경우가 많습니다. - 조건부 렌더링과 함께 사용 시 주의 : `v-if`와 같은 조건부 렌더링을 사용할 경우, 해당 요소가 DOM에 존재하지 않을 때 `$refs`는 `<a href='https://sangseek.com/sangseeks/undefined/ko'>undefined</a>`가 됩니다. 따라서 `$refs`를 사용할 때는 해당 요소가 존재하는지 확인하는 것이 중요합니다. 결론 Vue.js에서 템플릿 참조 변수는 DOM 요소나 자식 컴포넌트에 직접 접근할 수 있는 유용한 방법입니다. 이를 통해 특정 요소에 대한 조작이나 정보를 쉽게 얻을 수 있지만, Vue의 반응형 시스템과는 별개로 작동하므로 사용 시 주의가 필요합니다. 템플릿 참조 변수를 적절히 활용하면 Vue 애플리케이션의 유연성과 효율성을 높일 수 있습니다.