react-fast-marquee v1.6.5: Duration 계산 불안정으로 인한 속도 불일치 이슈 제기

해당 내용은 사내 프로젝트에서 라이브러리 이슈가 있어서 분석후 라이브러리 repo의 이슈에도 등록해놓았습니다.

- 버전 : 1.6.5

- 이슈 내용

- 원인 분석(with 소스코드 분석)

- 재현 방법

- 이전 관련 PR 이력 파악

https://github.com/justin-chu/react-fast-marquee/issues/130

 

티커 라이브러리를 사용하는데 다른 컴포넌트를 생성시 티커 컴포넌트의 속도가 달라지는 현상이 발생하였습니다.

소스코드에서 speed로 계산하는 부분이 있나 살펴보겠습니다.

https://github.com/justin-chu/react-fast-marquee/blob/master/src/components/Marquee.tsx

marqueeWidth, containerWidth, speed등을 활용하여 duration 변수에 할당합니다.

  // /src/components/Marquee.tsx  
  // Animation duration
  const duration = useMemo(() => {
    if (autoFill) {
      return (marqueeWidth * multiplier) / speed;
    } else {
      return marqueeWidth < containerWidth
        ? containerWidth / speed
        : marqueeWidth / speed;
    }
  }, [autoFill, containerWidth, marqueeWidth, multiplier, speed]);

계산된 duration으로 스타일이 적용됩니다.

  // /src/components/Marquee.tsx 
  const marqueeStyle = useMemo(
    () => ({
      ["--play" as string]: play ? "running" : "paused",
      ["--direction" as string]: direction === "left" ? "normal" : "reverse",
      ["--duration" as string]: `${duration}s`,
      ["--delay" as string]: `${delay}s`,
      ["--iteration-count" as string]: !!loop ? `${loop}` : "infinite",
      ["--min-width" as string]: autoFill ? `auto` : "100%",
    }),
    [play, direction, duration, delay, loop, autoFill]
  );

실제 분석한 내용이 맞는지 화면의 Elements에서 확인해보겠습니다.

앞 뒤로 연속되어야해서 두 개가 존재하는데 두 duration을 1s로 수정해보겠습니다.

 

duration의 값에 따라 속도가 달라지는것을 확인할 수 있었습니다.

그런데 문제는 동일한 해상도에서 페이지를 새로 로드할때마다 이 duration 계산값이 달라진다는것입니다.

 

라이브러리 자체에 이슈가 있는지 확인한 결과, 해결되지 않았음을 확인하였습니다.

 

https://github.com/justin-chu/react-fast-marquee/pull/61

PR은 children을 useEffect 의존성 배열에 추가해 자식 콘텐츠가 변경될 때마다 calculateWidth 함수가 호출되도록 수정된 내용입니다.

하지만 관리자가 언급했듯이 불안정한 속도에 대한 개선은 아니고, 의미있는 개선이라 merge되었을 뿐입니다.

라이브러리가 고쳐지지 않는이상 해결책은 duration 스타일에 !important로 강제하는것일 수 있을텐데,

사내 프로젝트에서 이 라이브러리 용도가 사용자가 설정한 속도가 반영되게 하는것이 주요한 기능이므로 그 방법은 유효하지않습니다.

따라서, 이 라이브러리를 걷어내는 방향을 검토할 필요가 있습니다.