내가 답답해서 적어두는 리액트에서 쓰는 Lottie-Web

react-lottie 패키지는 react 18을 지원을 안한다.

그래서 구글링후 lottie-react 받아 설치하니, 인터랙션이 작동을 안한다.

그래서 찾고찾아 찾은 lottie-web 패키지.

이건 <Lottie> 컴포넌트를 바로지원하지않아 본인이 직접만들어야함..

구글링해서 몇개 찾아봤는데 렌더링에서 이상하게 작동해서 svg 가 두번 렌더링된다던지
인터랙션이 안먹히는 오류가 있던가 해서.. 직접 만들어봄

1. 패키지 설치

npm i lottie-web

2. LottieComponent 생성 (복붙하면됨)

import React, { useState, useRef, useEffect } from "react";
import Lottie from "lottie-web";

// Lottie 컴포넌트 정의
const LottieComponent = ({
  animationData,
  loop,
  autoplay,
  speed,
  isPaused,
  isStopped,
  ...restProps
}) => {
  // Lottie 애니메이션 컨테이너에 대한 ref
  const animationContainer = useRef(null);
  const [animationInstance, setAnimationInstance] = useState(null);

  // Lottie 애니메이션 로드 및 초기화
  useEffect(() => {
    // Lottie 애니메이션 옵션 설정
    const animationOptions = {
      container: animationContainer.current,
      renderer: "svg",
      loop: loop !== undefined ? loop : true,
      autoplay: autoplay !== undefined ? autoplay : true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: "xMidYMid slice",
      },
    };

    // Lottie 애니메이션 로드
    const animation = Lottie.loadAnimation(animationOptions);
    // Lottie 애니메이션 상태 업데이트
    setAnimationInstance(animation);

    //  컴포넌트 unmount 시 애니메이션 제거
    return () => {
      animation.destroy();
    };
  }, [animationData, loop, autoplay]);

  // Lottie 인터랙션 관리
  useEffect(() => {
    if (animationInstance !== null) {
      // isPaused 프롭스에따라 일시정지 / 실행
      if (isPaused) {
        animationInstance.pause();
      } else {
        animationInstance.play();
      }

      if (isStopped) {
        animationInstance.stop();
      }

      if (speed !== undefined) {
        animationInstance.setSpeed(speed);
      }
    }
  }, [isPaused, isStopped, speed, animationInstance]);

  return <div ref={animationContainer} {...restProps} />;
};

export default LottieComponent;

3. 부모컴포넌트에서 Lottie 컴포넌트 호출

import Lottie from "./LottieComponent";
import animationData from "assets/loading.json";

.
.
.
          <Lottie
            animationData={animationData}
            speed={speed}
            isPaused={isPaused}
            isStopped={isStopped}
          />

오류 피드백 환영합니다