[Solid] Syntax | 07. ref

Solid는 DOM의 요소들을 참조변수로 받을 수 있습니다.

const myDiv = <div>My Element</div>;

그러나 이 경우 DOM을 구성할 때 각 요소들을 따로따로 구현한 뒤 이들을 모아 조합합니다.

 

이 방법은 각 참조 변수들을 호출해야 하기 때문에 가독성을 해칠 수 있습니다.

 

Solid의 ref 속성을 사용하면, 각 요소에 대한 참조를 바로 얻을 수 있습니다.

 

ref를 사용하면 해당 요소가 문서의 DOM에 첨부되기 전에 할당이 발생합니다.

let myDiv;

<div ref={myDiv}>My Element</div>

ref를 사용하고자 하는 컴포넌트가 다른 파일에 있을 때는 ref로 참조를 전달하기 어려울 수 있습니다.

 

이 때는 props.ref의 형태로 참조를 전달할 수 있습니다.

// *** App.js *** //
import { render } from "solid-js/web";
import { onMount, onCleanup } from "solid-js";

import Canvas from "./canvas";

function App() {
  let canvas;
  // ...
  return <Canvas ref={canvas} />; // props로 ref=canvas를 전달합니다.
}

render(() => <App />, document.getElementById("app"));


// *** Canvas.js *** //
export default function Canvas(props) {
  return <canvas ref={props.ref} width="256" height="256" />; // props 중 canvas를 ref값으로 받습니다.
}