컴포넌트의 생명주기동안 지속되는 가변값을 저장하는데 사용 .current 프로퍼티를 통해 현재 값에 접근하고 수정할 수 있다.
import { useRef } from "react"
export function Box(props) {
const ref = useRef({})
console.log(ref)
return (
<mesh {...props} ref={ref}>
<boxGeometry />
<meshBasicMaterial color={0x00ff00} wireframe/>
</mesh>
)
}
<aside> ❗ R3F의 경우 useRef.current의 변경을 감지하고 자동으로 Three.js 객체를 업데이트하는데 이는 일반적인 React useRef() 와는 다른동작이다.
</aside>
⇒ React의 렌더링 사이클에 영향을 주지 않은면서 3D 장면을 효율적으로 업데이트 할 수 있다.