Colin's Blog
React.js로 구현한 웹 사이트 로딩 애니메이션 만들기

React.js는 효율적인 웹 애플리케이션 개발을 가능하게 해주는 인기있는 JavaScript 라이브러리입니다. 웹 사이트 로딩 시간을 줄이고 사용자 경험을 향상시키기 위해 로딩 애니메이션을 추가하는 것은 좋은 아이디어입니다. 이번 기사에서는 React.js를 사용하여 웹 사이트 로딩 애니메이션을 구현하는 방법을 알아보겠습니다.

1. React 컴포넌트 생성

먼저, 로딩 애니메이션을 포함할 React 컴포넌트를 생성해야 합니다. 이 컴포넌트는 로딩 상태를 추적하고 애니메이션을 제어하는 역할을 합니다. 다음과 같이 컴포넌트를 생성해 봅시다.

import React, { useState, useEffect } from 'react';

const LoadingAnimation = () => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 데이터 로딩을 시뮬레이션하는 비동기 함수를 호출합니다.
    fetchData()
      .then(() => {
        setIsLoading(false);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  const fetchData = () => {
    // 데이터 로딩을 시뮬레이션하는 비동기 함수입니다.
    return new Promise((resolve) => {
      setTimeout(resolve, 3000); // 3초간 딜레이 후 데이터 로딩 성공
    });
  };

  return (
    <div>
      {isLoading ? (
        <div>로딩 중...</div>
      ) : (
        <div>로딩 완료</div>
      )}
    </div>
  );
};

export default LoadingAnimation;

이 코드는 isLoading이라는 상태값을 사용하여 로딩 상태를 추적합니다. useEffect 훅을 사용하여 컴포넌트가 마운트될 때 데이터를 로딩합니다. 이 예제에서는 fetchData 함수를 사용하여 데이터 로딩을 시뮬레이션하고, 3초 후에 로딩이 완료되었다고 가정하고 있습니다.

2. 로딩 애니메이션 스타일링

로딩 애니메이션을 보여주기 위해 CSS를 사용하여 스타일을 적용해야 합니다. LoadingAnimation 컴포넌트에 스타일을 적용하기 위해 <style> 태그를 사용하거나, CSS 모듈을 사용할 수도 있습니다. 다음은 간단한 스타일을 적용하는 예제입니다.

import React, { useState, useEffect } from 'react';
import styles from './LoadingAnimation.module.css';

const LoadingAnimation = () => {
  // ...

  return (
    <div className={styles.loading}>
      {isLoading ? (
        <div>로딩 중...</div>
      ) : (
        <div>로딩 완료</div>
      )}
    </div>
  );
};

export default LoadingAnimation;

LoadingAnimation 컴포넌트의 className 속성을 사용하여 스타일을 적용하고, CSS 모듈 파일 ./LoadingAnimation.module.css에서 스타일을 정의하는 방식입니다.

3. 웹 사이트에 로딩 애니메이션 추가

로딩 애니메이션을 사용하기 위해 생성된 LoadingAnimation 컴포넌트를 웹 사이트에 추가해야 합니다. 다음은 예제 웹 사이트에서 로딩 애니메이션을 표시하는 방법입니다.

import React from 'react';
import LoadingAnimation from './LoadingAnimation';

const App = () => {
  return (
    <div>
      <h1>웹 사이트 제목</h1>
      <LoadingAnimation />
      <p>웹 사이트 내용</p>
    </div>
  );
};

export default App;

LoadingAnimation 컴포넌트를 사용하여 로딩 애니메이션을 표시할 위치에 추가하면 됩니다. 위 예제에서는 웹 사이트의 제목과 내용 사이에 위치시켰습니다.

React.js로 구현한 웹 사이트 로딩 애니메이션을 만드는 방법을 알아보았습니다. 이렇게 로딩 애니메이션을 추가하면 사용자에게 로딩 시간 동안 기다릴 필요가 있음을 알려주고, 더 나은 사용자 경험을 제공할 수 있습니다.

#React #loadinganimation

© 2018 Colin. All rights reserved.