React with Hooks를 위한 빠르고 쉬운 로드 스피너 튜토리얼

먼저 스피너를 사용자 정의하고 생성에 필요한 코드를 얻을 수 있는 loading.io을 방문하십시오.

다음으로 React 프로젝트에서 LoadSpinner 구성 요소를 만듭니다.

    project-folder
    |_src
        |_LoadSpinner
            |_LoadSpinner.js
            |_LoadSpinner.css
        |_App.js
        ...

LoadSpinner.js 에서 기능 구성 요소를 만듭니다. 어떤 소품도 필요하지 않습니다. 그런 다음 스피너용HTML을 붙여넣습니다. css도 가져오는 것을 잊지 마십시오.

import React from 'react';
import './LoadSpinner.css';

const LoadSpinner = () => (
  <div className="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
);

export default LoadSpinner;

다음으로 css 코드를 LoadSpinner.css 안에 붙여넣습니다.

.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #cef;
}

/* 
    ... there are A LOT more classes I'm leaving off for the sake of space
*/

이제 state를 사용하여 스피너 표시 여부를 제어할 수 있습니다. 이 예에서는 보이는 스피너와 숨겨진 스피너 사이를 전환하는 버튼을 만들 것입니다.

import React, { useState } from 'react';
import './App.css';
import LoadSpinner from './LoadSpinner/LoadSpinner';


function App() {
  const [isLoaded, setIsLoaded] = useState(true);

  const handleIsLoadedToggle = () => {
    setIsLoaded(currentIsLoaded => !currentIsLoaded)
  };

  return (
    <div className="App">
      <button onClick={handleIsLoadedToggle}>
        Toggle LoadSpinner
      </button>

      {isLoaded && <LoadSpinner />}
    </div>
  );
}

export default App;

이 예에서는 "Toggle LoadSpinner"라는 버튼을 표시하고 있습니다. 버튼을 클릭하면 handleIsLoadedToggle가 실행되고 isLoaded가 현재 상태와 반대되는 상태로 설정됩니다.
return 문 아래에서 LoadSpinner가 true인 경우 isLoaded 구성 요소가 표시됩니다.

후크를 사용하지 않으려면 isLoaded 구성 요소의 상태에 class를 추가하면 됩니다.

class App extends React.Component {
  state = {
    isLoaded: true
  }

  handleIsLoadedToggle = () => {
    this.setState(prevState => ({
      isLoaded: !prevState.isLoaded
    }))
  };

  render() {
    return (
      <div className="App" >
        <button onClick={this.handleIsLoadedToggle}>Toggle LoadSpinner</button>
        { this.state.isLoaded && <LoadSpinner />}
      </div >
    );
  }
}

코드here를 확인하세요.