Custom Hook을 이용한 로딩 스피너 추가하기

06 Nov 2023

reactjs

로딩 스피너는 웹 애플리케이션에서 비동기 작업이 진행될 때 사용자에게 진행 상황을 시각적으로 보여주는 중요한 요소입니다. 이번 기사에서는 React에서 Custom Hook을 이용하여 로딩 스피너를 구현하는 방법을 살펴보겠습니다.

Custom Hook 만들기

먼저, Custom Hook을 만들어 보겠습니다. 로딩 상태를 추적하고 변경하는 useLoading Hook을 작성해 봅시다.

import { useState } from 'react';

const useLoading = () => {
  const [isLoading, setIsLoading] = useState(false);

  const startLoading = () => {
    setIsLoading(true);
  };

  const stopLoading = () => {
    setIsLoading(false);
  };

  return [isLoading, startLoading, stopLoading];
};

export default useLoading;

이 Custom Hook은 isLoading이라는 상태와 startLoading, stopLoading이라는 함수를 반환합니다. startLoading 함수를 호출하면 isLoading 상태를 true로 변경하고, stopLoading 함수를 호출하면 isLoading 상태를 false로 변경합니다.

로딩 스피너 컴포넌트 만들기

이제 로딩 스피너 컴포넌트를 만들어 보겠습니다. 이 컴포넌트는 isLoading 상태를 가져와서 로딩 중인 경우 스피너를 보여주고 그렇지 않은 경우에는 아무것도 표시하지 않습니다.

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

const LoadingSpinner = () => {
  const [isLoading] = useLoading();

  if (!isLoading) {
    return null;
  }

  return (
    <div className="loading-spinner">
      <div className="spinner"></div>
    </div>
  );
};

export default LoadingSpinner;

useLoading Hook을 사용하여 isLoading 상태를 가져온 후, 로딩 중이 아닌 경우 null을 반환하여 아무것도 표시되지 않도록 합니다. 그렇지 않은 경우에는 로딩 스피너를 보여줍니다.

로딩 스피너 사용하기

이제 로딩 스피너를 원하는 곳에서 사용할 수 있습니다. 예를 들어, 비동기 작업이 진행되는 동안 로딩 스피너를 표시하는 방법을 보여드리겠습니다.

import React from 'react';
import useLoading from './useLoading';
import fetchData from './api';

const DataFetchingComponent = () => {
  const [isLoading, startLoading, stopLoading] = useLoading();

  const fetchDataAsync = async () => {
    startLoading();

    try {
      const data = await fetchData();
      // 데이터 처리 로직
    } catch (error) {
      // 에러 처리 로직
    }

    stopLoading();
  };

  return (
    <div>
      <button onClick={fetchDataAsync}>데이터 불러오기</button>
      <LoadingSpinner />
    </div>
  );
};

export default DataFetchingComponent;

DataFetchingComponent 컴포넌트에서 useLoading Hook을 사용하여 isLoading 상태와 로딩 시작 및 종료 함수를 가져옵니다. 비동기 함수인 fetchDataAsync 내에서 데이터를 가져오기 전에 startLoading 함수를 호출하여 로딩 상태를 시작합니다. 데이터를 모두 받고 나면 stopLoading 함수를 호출하여 로딩 상태를 종료합니다. 로딩 스피너는 컴포넌트 마크업 내에서 사용되어 로딩 중인 동안 표시됩니다.

마무리

이 기사에서는 React에서 Custom Hook을 이용하여 로딩 스피너를 구현하는 방법을 살펴보았습니다. 이를 통해 애플리케이션의 사용자 경험을 향상시키고 비동기 작업을 보다 시각적으로 처리할 수 있게 되었습니다.

#React #CustomHook