[글쓴이:] 김 형준

React는 선언형 프로그래밍을 지향합니다. 어떤 시각적인 요소를 자식으로 선언해서 웹브라우저에 표시하는데요. 어떤 요소를 참조하기 위해 useRef 훅을 사용합니다. 그런데 처음 컴포넌트가 마운트 될때 useRef로 참조하고자 하는 요소가 아직 참조되지 않을 때가 있습니다. 이럴 때 useRef로 어떤 요소가 제대로 참조될 때 다시 컴포넌트를 렌더링해 줄 필요가 있는데요.

import { OrbitControls } from "@react-three/drei"
import { useRef, useState } from "react";
import * as THREE from "three"

function Outline(props) {
  const material = useMemo(
    () => new THREE.LineBasicMaterial({ color: 0xffff00 }),
    []
  ) 

  return <lineSegments 
    geometry={props.geometry} 
    material={material}
  />
}

function MyElement3D() {
  const refMesh = useRef()
  const [, setRefAllocated ] = useState(false)

  return (
    <>
      <OrbitControls />

      <ambientLight intensity={0.1} />
      <directionalLight position={[2, 1, 3]} intensity={0.5} />

      <mesh 
        ref={self => { refMesh.current = self; setRefAllocated(true) }}
        position={[-1.2, 0, 0]}>
        <boxGeometry args={[1,1,1,10,10,10]} />
        <meshStandardMaterial color="#8e44ad" />
        <Outline geometry={refMesh.current?.geometry} />
      </mesh>
    </>
  )
}

export default MyElement3D

상관없는 코드가 90%고 이 글과 관련된 코드가 10%인데요. 14번에 useRef에 대한 refMesh가 있고, refMesh가 참조하는 것이 25번 코드에 보입니다. 그런데 ref에 대한 지정을 함수로 지정하고 있다는 점입니다. refMesh에 요소가 참조되면 15번 코드에서 만들어 둔 상태 변경 함수를 호출하는데요. React에서 상태 변경은 컴포넌트 함수의 재실행을 의미하므로 refMesh에 어떤 요소가 할당되면 다시 컴포넌트를 렌더링하도록 유도합니다.