TIL 117. useRef 여러개 만들기

useRef는

const boxRef = useRef<THREE.Mesh>(null);

보통 이런 식으로 작성한다.

만약 여러개를 만든다면?

const firstBoxRef = useRef<THREE.Mesh>(null);
const secondBoxRef = useRef<THREE.Mesh>(null);
const thirdBoxRef = useRef<THREE.Mesh>(null);
const fourthBoxRef = useRef<THREE.Mesh>(null);

이렇게 만들 수 있다.

---

이번에 회사에서 유리창 하나하나를 컨트롤 하기 위해 useRef를 여러개 만들어야했다.

마음같아선, 유리창 각 객체에 직접 접근해서 컨트롤하고 싶었지만,
three.js에서 권장하는 방법이 아니라서 useRef로 컨트롤하게 됐다.

근데 유리창이 30개 정도 된다.

useRef를 사용하기 위해 30줄을 직접 작성한다? 너무 낭비다.

그래서 아래 코드처럼 사용했다.

const glassRefs = useRef<THREE.Mesh[]>([]);

// ...

	  glassRefs.current.map((item: THREE.Mesh, index: number) =>
        animatePosition(
          item,
          [item.x,item.y,item.z],
          4000
        )
      );

// ...

	  {glassData.map((item: {[key: string]: number}, index: number) => (
        <mesh
          ref={(el: THREE.Mesh) => (glassRefs.current[index] = el)}
        >
          <planeGeometry args={[item.h, item.w]} />
          <meshBasicMaterial/>
        </mesh>
      ))}

// ...

위 코드처럼 useRef를 초기화하고 사용하면 된다.

glassRefs를 콘솔창에 찍어보면 배열로 나타나는 것을 알 수 있다.