React Three Fiber와 함께 사용할 일반적인 React hooks를 살펴보고, 일반적인 실수를 피하면서 사용하는 방법을 알아보겠습니다.

React hooks에 익숙하지 않다면 먼저 공식 문서를 읽어보시길 권장합니다.

useState

useState는 상태 변수와 그것을 업데이트하는 함수를 생성할 수 있게 해줍니다.

Copy
const [color, setColor] = useState("white");

이는 두 요소가 있는 배열을 반환합니다:

• 상태 변수
• 이를 업데이트하는 함수

다음과 같이 사용할 수 있습니다:

Copy
import { useState } from "react";

// ...

const Cube = (props) => {
  const [color, setColor] = useState("white");

  useControls({
    changeColorToRed: button(() => setColor("red")),
    changeColorToBlue: button(() => setColor("blue")),
    changeColorToGreen: button(() => setColor("green")),
  });
  return (
    <mesh {...props}>
      <boxGeometry />
      <meshStandardMaterial color={color} />
    </mesh>
  );
};

// ...

버튼 중 하나를 클릭할 때마다 큐브의 색상이 변경됩니다.

상태 업데이트는 re-render를 트리거하므로, useState를 루프나 조건문 내에서 호출하는 것을 피해야 합니다.

r3f에서 자주 업데이트를 처리하는 올바른 방법을 React Three Fiber hooks 수업에서 배울 것이며, 최적화 수업에서 피해야 할 일반적인 실수에 대해 논의할 것입니다.

일단은, useState에 대한 몇 가지 경험칙이 있습니다:

• 빠르게 변하는 값에 대해 useState 호출을 피하세요.
• 가능한 가장 깊은 수준에서 사용하세요. 이렇게 하면 다시 렌더링이 필요 없는 항목을 다시 렌더링하지 않게 됩니다.

useMemo

useMemo는 값을 메모이제이션 할 수 있게 해줍니다. 이는 의존성이 변경되었을 때만 값이 계산된다는 것을 의미합니다.

우리의 material을 메모이제이션된 것으로 바꿔봅시다:

Copy
import { useMemo, useState } from "react";

// ...

const Cube = (props) => {
  // ...
  const material = useMemo(() => <meshStandardMaterial color={color} />, []);

  return (
    <mesh {...props}>
      <boxGeometry />
      {material}
    </mesh>
  );
};

// ...

• 첫 번째 인자는 메모이제이션 할 값을 반환하는 함수입니다. 우리의 경우, material 컴포넌트입니다.
• 두 번째 인자는 의존성 배열입니다. 빈 배열을 전달했으므로, material은 한 번만 계산됩니다.
• 반환값은 메모이제이션된 값입니다.

이제 버튼을 클릭해도 큐브의 색상이 변하지 않습니다. 이는 material이 다시 계산되지 않기 때문입니다.

이를 해결하기 위해 color를 의존성으로 전달해야 합니다:

Copy
const material = useMemo(() => <meshStandardMaterial color={color} />, [color]);

이제 버튼을 클릭하면 큐브의 색상이 변합니다. 이는 color 상태가 변경될 때 material이 다시 계산되기 때문입니다.

이 예제를 통해 useMemo의 작동 방식을 보여드리려고 했지만, 이 경우에는 material을 메모이제이션할 필요가 없습니다. React Three Fiber가 이미 필요한 최적화를 수행합니다.

useMemo가 유용할 수 있는 경우는 다음과 같습니다:

• 자주 렌더링되는 컴포넌트에서 값을 계산하는 비용이 클 때.
• 자식이 많은 컴포넌트에서 재렌더링을 피하고 싶을 때.
• props가 많은 컴포넌트에서 재렌더링을 피하고 싶을 때.

React와 r3f를 처음 시작할 때는 너무 이른 최적화를 위해 useMemo를 사용하지 마세요. 사용하기 까다로울 수 있으며 버그를 초래할 수 있습니다. 성능 문제가 있을 때 사용하는 것이 좋습니다.

useRef

useRef는 렌더링 간에 지속되는 변경 가능한 값을 생성할 수 있게 해줍니다.

보통 DOM 요소나 Three.js 객체에 대한 참조를 저장하는 데 사용되지만, 어떤 값도 저장할 수 있습니다.

useRef의 좋은 점은 값이 변경되더라도 재렌더링을 트리거하지 않는다는 것입니다. r3f와 함께 사용하면 애니메이션이나 자주 변하는 값을 다룰 때 완벽합니다.