React 프로그램에 로딩 적용하기, 로딩의 중요성

안녕하세요:) 개발자 우디입니다! 아래 내용 관련하여 작업 중이신 분들께 도움이되길 바라며 글을 공유하니 참고 부탁드립니다😊
(이번에 벨로그로 이사오면서 예전 글을 옮겨적었습니다. 이 점 양해 부탁드립니다!)

작업 시점: 2021년 9월

배경

• 최근 다양한 기능들을 추가하면서 유독 로딩을 많이 사용했는데, 사용자 입장에서 로딩 추가의 중요성을 많이 느낌.
• 그래서 리액트 프로젝트에서 로딩 추가하는 방법을 정리하고 로딩 추가의 중요성도 되새겨보고자 함

로딩 추가 방법

• 로딩은 로딩바 혹은 스피너로 구현할 수 있고, 아니면 프로그레스로 구현할 수 있음

• 로딩을 추가하는 방법에는 여러가지가 있겠지만, 이번 기능 구현에서는 react-spinners 라이브러리를 활용함

• React Spinners

  • 설치

    yarn add react-spinners

  • 예시

    import { useState, CSSProperties } from "react";
    import ClipLoader from "react-spinners/ClipLoader";
    
    const override: CSSProperties = {
      display: "block",
      margin: "0 auto",
      borderColor: "red",
    };
    
    function App() {
      let [loading, setLoading] = useState(true);
      let [color, setColor] = useState("#ffffff");
    
      return (
        <div className="sweet-loading">
          <button onClick={() => setLoading(!loading)}>Toggle Loader</button>
          <input value={color} onChange={(input) => setColor(input.target.value)} placeholder="Color of the loader" />
    
          <ClipLoader
            color={color}
            loading={loading}
            cssOverride={override}
            size={150}
            aria-label="Loading Spinner"
            data-testid="loader"
          />
        </div>
      );
    }
    
    export default App;

  • 실제 코드에 적용

    • import

      import PulseLoader from 'react-spinners/PulseLoader';

    • 사용자가 버튼 클릭 시 로딩 true, 실행 중인 작업 성공/실패시 로딩 false
    • 로딩바 UI

      <PulseLoader
         color="#9B9B9B"
         loading={this.state.loading}
         css="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
         size="16px"
       />

로딩 추가의 중요성

• 로딩은 엘리베이터의 거울과 같은 존재임
  • 특정 작업을 기다리는데 체감되는 시간을 줄여줌
• 요즘엔 재미있는 요소를 보여주면서 지루함을 느끼지 않도록 하기도 함.
  • 최근에는 문제 풀이, 설문 조사, 꿀팁 알려주기 등 다양해지고 있음.
• 프로그램에 에러가 발생하거나 단순히 멈춘 것이 아니라, 잘 실행되고 있는 중이라는 안도감을 사용자에게 줄 수 있음

배우고 느낀 점

• 어떻게 코드를 작성할 지 고민하는 것도 중요하지만, '어디에 로딩을 넣는게 좋을지'와 같이 사용자의 편의성을 고려하는 것도 중요함을 느낌
• 다양하게 등장하고 있는 로딩 기법들을 잘 숙지하고 사용자의 입장에서 어떤 것이 좋을지 지속적으로 사용하고 생각해보자
• 앞으로 사용자의 특정 액션이 들어간 기능을 구현할 때마다 로딩이 필요할지에 대해 고민해보자