[React / Three] useRef / useEffect / useFrame

1. useRef

구성 요소 인스턴스의 속성을 읽거나 수정하려는 경우, 해당 인스턴스에 대한 참조를 가져올때 사용한다.

 

2. useEffect

구성 요소가 렌더링 후 작업을 수행해야 함을 React에 다시 알린다. 여기에서는 Three.js 객체로 변환하고 그 속성을 다시 가져와 로직을 수행하도록 한다. -> Three.js 객체 정보를 이용할때 useRef와 함께 사용

import { useRef, useEffect } from 'react'

export default function Box(props) {
  const ref = useRef()

  useEffect(() => {
    console.log(ref.current)
  })

  return (
    <mesh {...props} ref={ref}>
      <boxGeometry />
      <meshBasicMaterial color={0x00ff00} wireframe />
    </mesh>
  )
}

 

3. useFrame

매 렌더링된 프레임 전에 코드를 실행할때 유용한, React Three Fiber hook이다. 아래는 JSX가 Three.js 객체로 변환된 후 현재 프레임이 캔버스에 렌더링 직전에 호출된다.

import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'

export default function Box(props) {
  const ref = useRef()

  useFrame((_, delta) => {
    ref.current.rotation.x += 1 * delta
    ref.current.rotation.y += 0.5 * delta
  })

  return (
    <mesh {...props} ref={ref}>
      <boxGeometry />
      <meshBasicMaterial color={0x00ff00} wireframe />
    </mesh>
  )
}