이근둥
근둥이의 블로그
이근둥
전체 방문자
874,952
오늘
323
어제
187

공지사항

  • 전체보기 (107)
    • 웹 (9)
    • 언어 & 프레임워크 (53)
      • JavaScript (7)
      • TypeScript (0)
      • Node.js (11)
      • Vue.js (3)
      • React (0)
      • React Native (0)
      • C & C++ (19)
      • Java & JSP (9)
      • Python (4)
    • 컴퓨터 과학 (3)
      • 알고리즘 (0)
      • 자료구조 (3)
    • 기타 (9)
      • Linux (1)
      • Git (2)
      • DialogFlow (4)
    • 일상 (13)
      • 게임 (13)
    • 칼럼 (9)
      • 회고 (0)
      • 나만의 글 (0)
      • 제품 리뷰 (9)
    • __Dev__ (9)
      • Release (9)
반응형

인기 글

  • 웹 푸시 알림(Web Push Notification)
    2022.06.13
    웹 푸시 알림(Web Push Notification)
  • [Tomcat] 아파치 톰캣 서버 포트 변경하기
    2018.08.24
    [Tomcat] 아파치 톰캣 서버 포트 변경하기
  • [Node.js] 실시간 채팅 서비스 만들기(5) - 채팅⋯
    2018.05.31
    [Node.js] 실시간 채팅 서비스 만들기(5) - 채팅⋯
  • [C/C++] 콘솔게임 프로그래밍 (1) - 프로젝트 생성⋯
    2017.12.19
    [C/C++] 콘솔게임 프로그래밍 (1) - 프로젝트 생성⋯
  • [Vue 3] Composition API와 템플릿 참조(⋯
    2020.10.02
    [Vue 3] Composition API와 템플릿 참조(⋯

태그

  • vue
  • Hello World!
  • 프로그레시브 웹 앱
  • self
  • WWDC
  • 자바
  • 출간
  • ES6
  • Composition API
  • Scanner
  • composition-api
  • 웹 확장
  • javascript
  • Vue 3
  • Java FX
  • pwa
  • 파티클
  • 이클립스
  • 자바 프로젝트
  • spread syntax
  • vue.js
  • java
  • 이펙트
  • AstroWar
  • vue-next
  • vue3
  • WWDC20
  • vuex
  • 전개 구문
  • Deemo

최근 댓글

  • 어디에서도 이런 친절한 설명은 받을 수 없었습니다. 응용⋯
    미쳤다...
  • 정말 너무 감사합니다 선생님 많은 도움이 되고있습니다 어떻⋯
    김준태
  • 커서 위치이동 함수까지 했는데 컴파일하면 Makefile.⋯
    Qour94
  • iOS의 경우 애플에서 개발하고 있는 webkit 엔진을 ⋯
    이근둥
  • android, IOS에서 된다고 했는데 Notifica⋯
    삽자루부대

최근 글

  • 웹 푸시 알림(Web Push Notification)
    2022.06.13
    웹 푸시 알림(Web Push Notification)
  • 스택(Stack)
    2022.05.26
    스택(Stack)
  • 배열(Array)
    2022.05.25
    배열(Array)
  • C언어로 배우는 자료구조
    2022.05.24
    C언어로 배우는 자료구조
  • [Vue 3] Composition API와 템플릿 참조(⋯
    2020.10.02
    [Vue 3] Composition API와 템플릿 참조(⋯

블로그 메뉴

  • 홈
  • 미디어로그
  • 방명록
hELLO · Designed By 정상우.
이근둥

근둥이의 블로그

[Vue 3] Composition API와 템플릿 참조(refs)
언어 & 프레임워크/Vue.js

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

2020. 10. 2. 19:17
반응형

 

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

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

 

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

 

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


[ 기존 방식 ]

기존에 사용하던 방식

 

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

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

 

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

 


[ Composition API 방식 ]

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

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

 

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

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

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

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

 

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

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

 

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

 


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

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

 

 

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

 

감사합니다.

 

 

 

 

 

 

 

 

 

 

[References]

v3.vuejs.org/guide/composition-api-template-refs.html#template-refs

반응형
저작자표시 비영리 동일조건
    '언어 & 프레임워크/Vue.js' 카테고리의 다른 글
    • [Vue 3] Composition API와 Vuex 사용하기
    • [Vue 3] Composition API 살펴보기
    Composition API, vue.js, vue3
    이근둥
    이근둥
    새로운 것을 좋아하는 프론트엔드 개발자 ✨
    댓글쓰기

    티스토리툴바