polling mechanism으로 react ref 확인하기

프로젝트 마무리를 하고 있던 중, 제대로 모두 돌아가고 있나 확인하다가
자동 회전하고 있던 컴포넌트인 Globe의 동작이 이상하다는 것을 발견했다.
오늘은 간단하게 useRef와 useEffect으로 threejs 애니메이션을 추가하는 컴포넌트가
reload/refresh 되어도 제대로 동작하도록 polling을 활용한 것을 다루고자 한다.

리로드하면 돌아가야하는 지구본

이전 코드

'use client';

import classNames from 'classnames/bind';
import COLORS from 'constants/colors';
import dynamic from 'next/dynamic';
import { useEffect, useRef } from 'react';

import { GlobeMethods } from 'react-globe.gl';
import Countries from './countries.json';
import Style from './globe.module.scss';

const cx = classNames.bind(Style);

// https://github.com/vasturiano/react-globe.gl/issues/1#issuecomment-554459831
// https://github.com/vasturiano/react-globe.gl/issues/1#issuecomment-1710898408
const Globe = dynamic(() => import('react-globe.gl').then(mod => mod.default), {
  ssr: false,
});

const RotatingGlobe = () => {
  const globeRef = useRef<GlobeMethods>();

  useEffect(() => {
    const globe = globeRef.current;
    if (globe != null) {
      globe.controls().autoRotate = true;
      globe.controls().autoRotateSpeed = 2.5;
      globe.controls().enableZoom = false;
    }
  }, []);

  return (
    <div className={cx('globe')}>
      <Globe
        height={500}
        ref={globeRef}
        backgroundColor={COLORS['100000']}
        globeImageUrl="/earth-dark.jpeg"
        hexPolygonsData={Countries.features}
        hexPolygonColor={() => COLORS[50]}
        atmosphereColor={COLORS[50]}
      />
    </div>
  );
};

export default RotatingGlobe;

문제

다음과 같이 ref 상태를 확인해 보니 undefined였다.

  useEffect(() => {
    console.log('Globe component mounted');
    console.log('Globe', globeRef);
    return () => {
      console.log('Globe component unmounted');
    };
  }, []);

 

useEffect가 실행되기 전에 ref를 잘 load 되었는지 확인하기 위해 다음과 같이 100ms setInterval을 사용해 보았다.

이렇게 컴퓨터나 컨트롤 장치가  외부의 장치가 준비나 상태 여부를 확인하는 방식을 polling이라고 한다. 

해당 코드는 window의 setInterval 인터페이스가 ref의 준비 여부를 확인하는 것이다.

  // Globe 가 충분히 로드될때까지 초기화 대기
  // React ref 가 아직 undefined인 문제가 있었음. globeRef 가 준비 되기 전 확인하기
  useEffect(() => {
    const interval = setInterval(() => {
      if (globeRef.current) {
        const globe = globeRef.current;
        const controls = globe.controls();
        controls.enableZoom = false; // zoom 비활성화
        controls.autoRotate = true; // 자동화
        controls.autoRotateSpeed = 2.5;
        clearInterval(interval); // ref가 준비되면 polling mechanism 중단
      }
    }, 100); // 100ms 마다 확인

    return () => clearInterval(interval);
  }, []);

 

100ms 인터벌을 갖고 확인하며 globeRef.current가 제대로 load 되면 threejs 애니메이션을 추가해 주고,

인터벌을 제거해 준다. 클린업 함수로 RotatingGlobe 컴포넌트가 언마운트한다면 인터벌을 제거해 주도록 했다.

 

완성코드

'use client';

import classNames from 'classnames/bind';
import COLORS from 'constants/colors';
import dynamic from 'next/dynamic';
import { Suspense, useEffect, useRef } from 'react';

import { GlobeMethods } from 'react-globe.gl';
import Countries from './countries.json';
import Style from './globe.module.scss';

const cx = classNames.bind(Style);

// https://github.com/vasturiano/react-globe.gl/issues/1#issuecomment-1710898408
const Globe = dynamic(() => import('react-globe.gl').then(mod => mod.default), {
  ssr: false,
});

const RotatingGlobe = () => {
  const globeRef = useRef<GlobeMethods>();

  // Globe 가 충분히 로드될때까지 초기화 대기
  // React ref 가 아직 undefined인 문제가 있었음. globeRef 가 준비 되기 전 확인하기
  useEffect(() => {
    const interval = setInterval(() => {
      if (globeRef.current) {
        const globe = globeRef.current;
        const controls = globe.controls();
        controls.enableZoom = false; // zoom 비활성화
        controls.autoRotate = true; // 자동화
        controls.autoRotateSpeed = 2.5;
        clearInterval(interval); // ref가 준비되면 polling mechanism 중단
      }
    }, 100); // Check every 100ms

    return () => clearInterval(interval);
  }, []);

  return (
    <div className={cx('globe')}>
      <Suspense fallback={null}>
        <Globe
          height={500}
          ref={globeRef}
          backgroundColor={COLORS['100000']}
          globeImageUrl="/earth-dark.jpeg"
          hexPolygonsData={Countries.features}
          hexPolygonColor={() => COLORS[50]}
          atmosphereColor={COLORS[50]}
        />
      </Suspense>
    </div>
  );
};

export default RotatingGlobe;