[Svelte]DOM 요소 참조 방법

DOM 요소 참조 방법

이전 포스팅에서 bind 지시자를 사용하여 Form 요소의 value를 매핑하고 그룹화하는 방법을 소개하였습니다.

[Svelte]bind 지시자 사용 방법 및 Form 요소 바인딩

bind 지시자는 Form 요소의 value를 매핑하고 그룹화하는 방법 이외에도 DOM 요소를 참조하기 위해 사용할 수 있습니다.

 

HTML 요소 또는 컴포넌트에 bind:this={변수명}를 작성하면 script 영역에서 해당 변수를 통해 HTML 또는 컴포넌트를 참조할 수 있습니다.

 

예를 들어, 특정 이벤트 핸들러 함수가 실행되는 경우 input 태그에 focus()를 설정할 수 있으며 강제로 click 이벤트를 발생시킬 수 있습니다.

---

React의 Ref

Svelte의 bind:this는 React의 Ref와 매우 유사합니다.

 

React에서 DOM 요소를 접근하거나 자식 컴포넌트의 이벤트 핸들러 함수를 강제로 호출해야 하는 경우 Ref를 사용합니다. 클래스 컴포넌트에서는 createRef()를 사용하며 함수형 컴포넌트에서는 useRef()를 사용합니다.

 

다음 예제는 "버튼"을 클릭하면 textarea에 포커싱을 주며, textarea에 강제로 클릭 이벤트를 발생시킵니다.

import { useRef } from "react";

export default function App() {
  const textareaRef = useRef();

  const handleButtonClick = () => {
    textareaRef.current.focus();
    textareaRef.current.click();
  };

  const handleTextAreaClick = () => {
    console.log("handleTextAreaClick");
  };

  return (
    <>
      <button onClick={handleButtonClick}>버튼</button>
      <textarea onClick={handleTextAreaClick} ref={textareaRef} />
    </>
  );
}

[실행 결과]

---

Svelte의 bind:this

이번에는 Svelte에서 bind 지시문의 this를 사용하여 textarea를 참조하는 소스 코드입니다. script 영역의 textareaRef라는 변수를 textarea 요소에 대한 참조로 사용합니다.

<script>
  let textareaRef;

  const handleButtonClick = () => {
    textareaRef.focus();
    textareaRef.click();
  }

  const handleTextAreaClick = () => {
    console.log('handleTextAreaClick');
  }
</script>

<div>
  <button on:click={handleButtonClick}>버튼</button>
  <textarea 
    bind:this={textareaRef}
    on:click={handleTextAreaClick}
  />
</div>

[실행 결과]

---

정리

• bind 지시문의 this를 사용하여 DOM 요소 및 컴포넌트를 참조할 수 있습니다.
• Svelte의 bind:this는 React의 Ref와 유사합니다.