[React] Lottie Files 사용하기

Install Package

npm i lottie-react

 

아래 링크에서 원하는 로티 파일 다운로드 후 코드를 작성합니다. (파일을 직접 다운로드하지 않고 URL 사용도 가능) 

LottieFiles: Download Free lightweight animations for website & apps.

간단하게 로그인 성공 후 애니메이션을 1.5초 동안 출력하도록 구현해주었습니다.

import Lottie from "lottie-react";
import Success from "@/assets/lottie/Success.json";
// ...

const Login = () => {
    const [isLoginSuccess, setisLoginSuccess] = useState(false);
    
    const handleLogin = async () => {
    	try {
            // ... 로그인 메서드
            setIsLoginSuccess(true);

            setTimeout(() => {
                navigate("/redirect-page");
            }, 1500);
        } catch (error) {
        	// ...
        }
    };
    
    return (
    	<>
            {isLoginSuccess ? (
                    <div className="w-56 h-56 mx-auto my-auto">
                        <Lottie
                            animationData={Success}  // 여기에 원하는 애니메이션 파일 적용
                            loop={false}
                            autoplay={true}
                        />
                    </div>
            ) : (
            
            // ...