모던 ProgressBar NProgress 리액트 사용 예시(+RTK Query)

안드로이드 브라우저나 Github 등에서 웹서핑을 하면 화면 상단에 나타나는 ProgressBar 효과를 내어주는 모듈인 NProgress 리액트 사용 예시를 정리해 보았습니다.

아래와 같이 페이지가 로딩될 때 화면 페이지 상단에서 로딩되는 프로그레스바 보신 적 있으신가요?

보통 프로그레스바를 구현하려면 시작과 끝 시간의 간격을 계산해야 사용 가능한 경우가 많아, 간격을 계산하기 힘든 경우에는 사용이 난감한 경우가 있습니다.

NProgress 는 시작과 끝만 있으면 정확한 간격 계산이 되지 않더라도 적절히 사용자에게 보기 좋게 진행 사항을 표현해주기 때문에 가볍게 쓰기 좋은 프로그레스 바입니다.

NProgress 바 설치

npm으로 nprogress 모듈을 설치해 주면 됩니다.

npm install --save nprogress  

타입스크립트로 개발 중인 경우에는 @types도 같이 설치해 줍니다.

npm install --save @types/nprogress

NProgress 사용법

사용하고자 하는 jsx 혹은 tsx 파일에 다음과 같이 추가해 줍니다.

import NProgress from "nprogress";
import "nprogress/nprogress.css";

기본 프로그레스바 출력

기본적으로 start(), done() 메소드 2개만으로 화면 표현을 적절히 끝낼 수 있습니다.

NProgress.start();
NProgress.done();

프로그레스바 설정

minimum(최초 시작 위치), easing(ease 효과), speed(프로그레스바 진행 속도), showSpinner(스피너 효과) 등을 지정할 수 있습니다.

NProgress의 settings 를 통해 지정할 수 있고

NProgress.settings.showSpinner = false;
NProgress.settings.minimum = 0.1;

다음과 같이 configure 속성을 통해서도 지정할 수 있습니다.

NProgress.configure({
    showSpinner: true,
    minimum: 0.1,
    speed: 1000,
    easing: "ease",
    trickle: true,
    trickleSpeed: 500,
  });

기본 bar의 css 속성 변경

프로그레스 바의 color나 height 등은 nprogress ID 를 읽어와서 간단히 css로 적용 가능합니다.

#nprogress .bar {
  background: #ffbb00 !important;
  height: 30px;
}

위의 경우 30px의 두꺼운 바가 생성되어 오렌지색 계열의 Progress Bar로 적용되게 됩니다.

React Tool Kit Query 에 NProgress 적용

RTK Query에는 onQueryStarted(Query 시작 전), queryFulfilled(Query가 끝난 후) 파라메터를 제공하기 때문에 이 부분에 NProgress를 적용하면 됩니다.

NProgress start, end 구현

설명을 위해 간단하게 다음과 같이 외부 파일로 NProgress를 시작/끝 함수 두개를 만들었습니다.

import NProgress from "nprogress";
import "nprogress/nprogress.css";

export const NProgressStart = () => {
  NProgress.configure({
    showSpinner: true,
    minimum: 0.1,
    speed: 1000,
    easing: "ease",
    trickle: true,
    trickleSpeed: 500,
  });
  NProgress.start();
};

export const NProgressDone = () => {
  NProgress.done();
};

rtk query onQueryStarted, queryFulfilled 인자에 적용

rtk api 파일에서 NProgressStart, NProgressDone를 import 해서 다음과 같이 사용하면 됩니다.

...
export const xxxxApi = createApi({
  reducerPath: "xxxxApi",
  ...
  }),

  endpoints: (builder) => ({
    getXxxxList: builder.query<TXxxxList, void>({
      ...
      ...

      onQueryStarted(_arg, { queryFulfilled }) {
        NProgressStart();
        queryFulfilled.then(() => {
          NProgressDone();
        });
      },
    }),
  }),
});

그러면 getXxxxList 가 시작되면서 NProgressStart 가 실행되어 Progress bar가 화면에 출력되며, 데이터 조회가 끝나면 NProgressDone가 실행되어 화면에서 사라지게 됩니다.

위의 예제는 일부러 height 및 색깔을 바꾼 점 참고하시기 바랍니다.

이상으로 NProgress 를 React Toolkit Query에서 사용하는 예제를 정리해 보았습니다.

그 밖에 도움 되는 글

리액트 Quill 에디터 사용법 (2023)

react-pro-sidebar 사용법 예시 정리(2023)