[Vue 3] Composition API와 템플릿 참조(refs)

Vue.js 2020. 10. 2. 19:17

안녕하세요, 이번 포스트에서는 컴포지션 API(Compisition API)에서

템플릿을 참조하는 방법에 대해 소개하려고 합니다.

사용 방법이 크게 달라지진 않았지만, 값으로써 참조하는 방법이 조금 바뀌게 되었습니다.

먼저, 기존의 템플릿 요소 참조 방법을 간략히 살펴보겠습니다.

[ 기존 방식 ]

기존에는 참조하고자 하는 템플릿 요소에 ref="바인딩명" 형식으로 작성한 후,

마운트 이후 this 컨텍스트의 $refs를 통해 간단히 참조할 수 있었습니다.

다만, 컴포지션 API의 경우 this 컨텍스트가 존재하지 않으므로 조금 다른 방법으로 사용해야합니다.

참조하고자 하는 템플릿 요소에 ref 속성을 추가하는 방법은 기존과 동일합니다.

그러면 값은 어떠한 방법으로 참조하면 될까요?

바로 동일한 이름의 ref 값을 컨텍스트에 노출시키면 Vue 내부에서 참조 가능하도록 값을 할당합니다.

(여기에서 ref는 템플릿에 추가한 속성이 아닌 컴포지션 API의 반응형 값 중 하나인 ref를 의미합니다)

템플릿에서는 myElement 라는 이름으로 참조하고자 하고 있습니다.

이에 따라 동일한 이름(myElement)을 가진 ref 값을 생성하고, 컨텍스트로 노출시킨 모습을 볼 수 있습니다.

템플릿에 추가한 ref 속성의 키 값과 동일한 이름을 가진 ref(반응형 값)가 컨텍스트에 존재한다면,

Vue 가상 돔의 마운트/패치 중 해당 요소 혹은 인스턴스를 지정된 ref 값에 할당시킵니다.

마운트 과정에서 할당하므로, 마운트 이후 참조 가능하다는 것은 알고 계실 것입니다.

어려운 내용은 아니지만 기존의 Vue와 Composition API의 템플릿 참조 방식은

조금 상이하기 때문에 숙지하시는 것이 좋을 것 같습니다.

추가적인 질문사항이나 기타 궁금한 사항은 댓글 혹은 이메일 부탁드립니다!

감사합니다.

[References]

[Vue 3] Composition API와 템플릿 참조(refs) (0)	2020.10.02
[Vue 3] Composition API와 Vuex 사용하기 (0)	2020.09.06
[Vue 3] Composition API 살펴보기 (0)	2020.03.04