[react-lottie] Iconscout Lottie 사용하기

오늘은 리액트에서 Lottie 애니매이션을 적용시키는 방법에 대해 공부해보고자 한다.

1. 'react-lottie' 패키지 설치

Lottie JSON 파일을 React 컴포넌트로 변환할 수있게 제공해주는 react의 'react-lottie' 패키지를 설치해야 한다.

나는 yarn으로 설치해주었다.

npm install --save react-lottie
yarn add react-lottie

2. Lottie를 JSON으로 다운받기

Iconscout 사이트
Iconscout에서 원하는 Lottie 애니메이션을 JSON 형태로 다운로드 받는다.

Download Animated Icon > Lottie Json

3. Lottie 컴포넌트 생성

import Lottie from 'react-lottie';
import snow from 'public/snow.json'; // Lottie JSON 파일 경로

const DefaultLottie = () => {
  const defaultOptions = {
    loop: true,
    autoplay: true, 
    animationData: snow,
    rendererSettings: {
      preserveAspectRatio: 'xMidYMid slice'
    }
  };

  return <Lottie options={defaultOptions} height={400} width={400} />;
};

export default DefaultLottie;

4. Lottie 컴포넌트 사용

import { useState } from 'react';
import DefaultLottie from './DefaultLottie'; // Lottie 컴포넌트 파일 경로

const App = () => {
  
  const [isLoading, setLoading] = useState(false);
  
  return (
    <div className="App">
      <h1>Lottie</h1>
      <button onClick={() => setLoading(true)}>Lottie Button</button>
      {isLoading && <DefaultLottie />}
    </div>
  );
};

export default App;

이렇게 간단하게 Lottie를 Json으로 다운받고 React에 적용시키는 법을 알아봤다!