[React / Lottie] 리액트에서 로띠 사용하기

lottie란?

에어비엔비에서 개발한 오픈소스 라이브러리.
JSON 기반 애니메이션 파일 형식으로 실시간으로 애니메이션을 렌더링.
백터기반으로 용량이 적고 해상도 저하가 없음.

1. 프로젝트에서 로띠 설치

npm install --save react-lottie-player

2. 컴포넌트에 로띠 적용

import Lottie from 'react-lottie-player'
import animationData from '../../assets/lottie/partcle.json';

const LottieAnimation = () => {

    return (
        <Lottie
            loop
            animationData={animationData}
            play
            className='main-animation'
        />
    )
}

export default LottieAnimation;