Refs를 사용하여 DOM 요소 쿼리(조회)하기(Query DOM Elements with Refs)

 

 

Refs를 사용하여 DOM 요소 쿼리(조회)하기
Query DOM Elements with Refs

 

 

 

 

 

 

 

What

Shadow DOM과 light DOM에서 refs를 활용하여 임의 요소에 접근할 수 있다.

Refs를 추가하고 싶은 요소에 두거나 selector 없이 사용이 가능하다.

이전까지 특정 DOM 요소에 접근하기 위해 querySelector를 사용해야만 했다.

 

 

 

 

 

 

 

 

Where

 Refs는 Lightning Experience, Salesforce Classic, all versions of the mobile app in all editions 사용 가능

 

 

 

 

 

 

 

 

 

How

1. lwc:ref 명령어를 원하는 요소에 추가하고 값을 할당

<template>
    <div lwc:ref="myDiv"></div>
</template>

 

 

 

 

2. this.refs. 를 이용해 호출한다.

export default class extends LightningElement {
  renderedCallback() {
    console.log(this.refs.myDiv);
  }
}

 

 

 

 

 

 

 

 

 

https://help.salesforce.com/s/articleView?id=release-notes.rn_lwc_templaterefs.htm&release=242&type=5

Query DOM Elements with Refs