글

작성일자

useRef로 요소가 참조될 때 다시 컴포넌트 렌더링하기

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에 어떤 요소가 할당되면 다시 컴포넌트를 렌더링하도록 유도합니다.

작성일자

R3F에서 Shader를 통한 Material

먼저 다음처럼 drei의 shaderMaterial를 이용해 GLSL로 재질을 만들 수 있습니다.

import { shaderMaterial } from '@react-three/drei'

const WaveShaderMaterial = shaderMaterial(
  {
    uColor: new THREE.Color(1, 0, 0)
  },

  /* glsl */`
    varying vec2 vUv;

    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,

  /* glsl */`
    uniform vec3 uColor;
    varying vec2 vUv;

    void main() {
      gl_FragColor = vec4(vUv.y * uColor, 1.0);
    }
  `
)

리엑트는 선언형 프로그래밍(?) 방식을 권장하므로 위에서 만든 WaveShaderMaterial을 Tag처럼 선언해서 사용할 수 있도록 해야 합니다. 이때 R3F의 extend가 사용됩니다.

import { Canvas, extend } from '@react-three/fiber'

extend({ WaveShaderMaterial })

실제 사용은 다음과 같습니다.

const MyCanvas = () => {
  return (
    <Canvas>
      <pointLight position={[10,10,10]} />
      <mesh>
        <planeGeometry args={[5,5]} />
        <waveShaderMaterial uColor={"white"} />
      </mesh>
    </Canvas>
  )
}

function App() {
  return (
    <MyCanvas />
  )
}

결과는 다음과 같습니다.