<React> 로딩스피너:react-spinners

api를 호출하면서 유저를 위해서 "데이터를 가져오고 있어요"를 알려주기 위한 로딩스피너 넣는 방법에 대해 알아보자

로딩스피너를 직접 만드는 방법도 있겠지만 난 똑똑한 사람이 만들어 놓은걸 들고왔다
구글에 react-spinners 를 검색해서 상단에 npm으로 설치할 수 있는 스피너를 얻는다

터미널에 설치

npm install --save react-spinners

설치하여 사용한 예시

ClipLoader 를 useState값으로 관리한다
loading==true 일때 <ClipLoader> 가 보여질 수 있도록 하고
false일때 보여주고자 하는 데이터가 rendering될 수 있도록 삼항연산자를 사용한다

import { useState, CSSProperties } from "react";
import ClipLoader from "react-spinners/ClipLoader"; //설치한 cliploader을 import한다

function App() {
  let [loading, setLoading] = useState(false);

 return (
    <div>
      <div>
        {loading ? (
          <div className='container'>
            <ClipLoader
              color='#f88c6b'
              loading={loading} //useState로 관리
              size={150}
            />
          </div>
        ) : (
          <div className='container'>
            <WeatherBox weather={weather} />
            <WeatherButton cities={cities} setCity={setCity} />
          </div>
        )}
      </div>
    </div>
  );
}

export default App;

보통 스피너는 데이터를 받아오기까지의 빈화면을 대체하기 위해 사용된다
useState로 loading을 관리하고
데이터를 받아오기전에 true값으로 스피너를 보이게하고
데이터가 전달되면
false 값으로 스피너를 사라지게 한다

  const getWeatherByCity = async () => {
    let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;
    setLoading(true); //데이터가 올때까지 스피너 보이기
    let response = await fetch(url);
    let data = await response.json();
    setWeather(data);
    setLoading(false); //데이터가 전달 되면 스피너 멈추기
  };

로딩스피너의 장점

• 유저를 배려하는 코딩
• 데이터 전송 후 렌더링이 될 수 있도록 If-else문을 만들면 조건부렌더링을 하지 않아도 에러가 나지 않는다