[react] Lottie 활용하여 react에서 로딩 화면 구성하기

 

 

프로그래밍 세계를 탐구합시다.

 

 

 

Lottie라이브러리를 활용하여 로딩 화면을 효과적으로 구성할 수 있습니다.

아래는 구현 예시입니다.

 

 

로딩 화면 예시

 

 

 

 

 

 Lottie 사이트 링크

 

https://lottiefiles.com/kr/

무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi

 

1. Lottie 설치

 

Lottie를 설치해야 합니다. 터미널(Ctrl+J) 에 다음과 같은 명령어를 입력하여 설치할 수 있습니다.

 

npm install react-lottie

 

 

2. import

 

Lottie를 설치한 후에는, 원하는 컴포넌트에 import 해줍니다.

 

import Lottie from 'react-lottie';

 

 

3. 또한, 사용할 애니메이션의 JSON 파일을 import 해줍니다.

 

import LoadingAnimation from '../lottie/loading.json';

 

파일 경로에 맞게 적절히 입력하시면 됩니다.

 

 

4. 컴포넌트

 

Loading.jsx

 

import React from 'react';
import Lottie from 'lottie-react';
import LoadingAnimation from '../lottie/loading.json'; // 로딩 애니메이션 JSON 파일 경로

const Loading = () => {
    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
            <Lottie animationData={LoadingAnimation} loop autoPlay />
        </div>
    );
};

export default Loading;

 

 

5. loading.json

 

lottie에서 다운로드받은 loading.json 파일을 src 내부에 첨부합니다.

 

 

6. 로딩 설정

 

적절한 위치에 로딩 코드를 작성합니다.

 

App.js

 

function App() {
  const [message, setMessage] = useState("");
  const [isLoading, setIsLoading] = useState(true); // 로딩 상태를 관리

  useEffect(() => {
    // 데이터를 가져오는 비동기 작업을 시뮬레이트
    setTimeout(() => {
      fetch('/media/cardata')
        .then(response => response.text())
        .then(message => {
          setMessage(message);
          setIsLoading(false); // 2초 후에 로딩 완료로 설정
        });
    }, 2500); // 2초 지연
  }, []);

  return (
    <>
      {isLoading ? (
        <Loading />
      ) : (
      )}
    </>
  );
}

export default App;

 

 

위와 같은 과정을 통해 loading 화면을 효과적으로 구성할 수 있습니다.