이근둥
근둥이의 블로그
이근둥
전체 방문자
759,181
오늘
137
어제
617

공지사항

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

인기 글

  • [Tomcat] 아파치 톰캣 서버 포⋯
    2018.08.24
    [Tomcat] 아파치 톰캣 서버 포⋯
  • [Node.js] 실시간 채팅 서비스⋯
    2018.05.31
    [Node.js] 실시간 채팅 서비스⋯
  • [PWA] 프로그레시브 웹 앱 시작⋯
    2019.01.09
    [PWA] 프로그레시브 웹 앱 시작⋯
  • [Linux] Ubuntu 18.04 테마 설⋯
    2019.01.16
    [Linux] Ubuntu 18.04 테마 설⋯
  • [DialogFlow] 다이얼로그 플로⋯
    2018.07.13
    [DialogFlow] 다이얼로그 플로⋯

태그

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

최근 댓글

  • 아래 composition API 부분 코⋯
    깜장발
  • 좋은 글 작성해주셔서 감사합니⋯
    바밤
  • 현재 이 코드를 응용한 간단한⋯
    ㅇㅇ
  • wasd키가 아니라 방향키로는 못⋯
    clvkdh
  • 찾아 본 것 중에 가장 좋았어요⋯
    우왕

최근 글

  • 스택(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와 템⋯
  • [Vue 3] Composition API와 Vue⋯
    2020.09.06
    [Vue 3] Composition API와 Vue⋯

블로그 메뉴

  • 홈
  • 미디어로그
  • 방명록
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
    이근둥
    이근둥
    새로운 것을 좋아하는 프론트엔드 개발자 ✨
    댓글쓰기
    • 이전
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • ···
    • 106
    • 다음

    티스토리툴바