[React + Node 같이 때려잡기] (6) npm 리액트 로딩스피너 + 위치 도시 기반 날씨 앱 완성

728x90

npm 리액트 로딩스피너

https://www.npmjs.com/package/react-spinners

react-spinners

A collection of react loading spinners. Latest version: 0.13.7, last published: 7 days ago. Start using react-spinners in your project by running `npm i react-spinners`. There are 714 other projects in the npm registry using react-spinners.

www.npmjs.com

npm install --save react-spinners

Example

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 './App.css';
import { useEffect, useState } from 'react';
import WeatherBox from "./component/WaetherBox";
import WeatherButton from "./component/WeatherButton";
import ClipLoader from "react-spinners/ClipLoader";
import 'bootstrap/dist/css/bootstrap.min.css';

//1. 앱이 실행되자마자 현재 위치 기반의 날씨가 보인다.
//2. 날씨 정보에는 도시, 섭씨, 화씨 날씨 상태
//3. 5개의 버튼이 있다 (1개는 현재 위치, 4개는 다른 도시)
//4. 로딩 스피너 기능 추가

function App() {
	const [userWeather, setUserWeather] = useState(null);
	const [city, setCity] = useState("Your Weather");
	const cities = ['Your Weather', 'new york', 'toronto', 'paris', 'rondon'];
	let [loading, setLoading] = useState(true);
	let [color, setColor] = useState("#ffffff");


	const getCurrentLocation = () => {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition((position) => {
				const latitude = position.coords.latitude;
				const longitude = position.coords.longitude;
				getWeatherByCurrentLocation(latitude, longitude);
			});
		} else {
			alert("Geolocation is not supported by this browser.");
		}
	}

	//await 쓰고자 하는 함수는 async 여야 한다! 
	const getWeatherByCurrentLocation = async (lat, lon) => {
		let url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=b13282392fd34dd9436686c7c7ecda83&units=metric`;
		let response = await fetch(url) //비동기(직독: url을 patch하는 것을 기다려달라!) : url 로딩한 뒤 응답값을 받기로 함
		let data = await response.json(); //응답에서 json 추출하는 것을 기다려달라
		setUserWeather(data);
		console.log(data);
	}

	const getWeatherByCity = async () => {
		let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=b13282392fd34dd9436686c7c7ecda83&units=metric`;
		//
		let response = await fetch(url) //비동기(직독: url을 patch하는 것을 기다려달라!) : url 로딩한 뒤 응답값을 받기로 함
		let data = await response.json(); //응답에서 json 추출하는 것을 기다려달라
		setUserWeather(data);
		console.log(data);
	}

	useEffect(() => {
		if (city == "Your Weather") {
			getCurrentLocation();
		} else {
			getWeatherByCity('city', city);
		}
	}, [city]);


	return (
		<div>
			<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}
					size={150}
					aria-label="Loading Spinner"
					data-testid="loader"
				/>
			</div>
			<div className='main'>
				<WeatherBox weather={userWeather} />
				<WeatherButton cities={cities} setCity={setCity} />
			</div>
			<div>
			</div>
		</div >
	);
}

export default App;

기본 값을 아래와 같이 해주되,

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

데이터를 fetch 하는 동안 true로 해주는 로직으로 바꾸어준다.

fetch가 끝나면 다시 false로 돌려준다.

App.js

import './App.css';
import { useEffect, useState } from 'react';
import WeatherBox from "./component/WaetherBox";
import WeatherButton from "./component/WeatherButton";
import ClipLoader from "react-spinners/ClipLoader";
import 'bootstrap/dist/css/bootstrap.min.css';

//1. 앱이 실행되자마자 현재 위치 기반의 날씨가 보인다.
//2. 날씨 정보에는 도시, 섭씨, 화씨 날씨 상태
//3. 5개의 버튼이 있다 (1개는 현재 위치, 4개는 다른 도시)
//4. 로딩 스피너 기능 추가

function App() {
	const [userWeather, setUserWeather] = useState(null);
	const [city, setCity] = useState("Your Weather");
	const cities = ['Your Weather', 'new york', 'toronto', 'paris', 'rondon'];
	let [loading, setLoading] = useState(false);


	const getCurrentLocation = () => {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition((position) => {
				const latitude = position.coords.latitude;
				const longitude = position.coords.longitude;
				getWeatherByCurrentLocation(latitude, longitude);
			});
		} else {
			alert("Geolocation is not supported by this browser.");
		}
	}

	//await 쓰고자 하는 함수는 async 여야 한다! 
	const getWeatherByCurrentLocation = async (lat, lon) => {
		let url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=b13282392fd34dd9436686c7c7ecda83&units=metric`;
		setLoading(true);
		let response = await fetch(url) //비동기(직독: url을 patch하는 것을 기다려달라!) : url 로딩한 뒤 응답값을 받기로 함
		let data = await response.json(); //응답에서 json 추출하는 것을 기다려달라
		setUserWeather(data);
		setLoading(false);
		console.log(data);
	}

	const getWeatherByCity = async () => {
		let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=b13282392fd34dd9436686c7c7ecda83&units=metric`;
		setLoading(true);
		let response = await fetch(url) //비동기(직독: url을 patch하는 것을 기다려달라!) : url 로딩한 뒤 응답값을 받기로 함
		let data = await response.json(); //응답에서 json 추출하는 것을 기다려달라
		setUserWeather(data);
		setLoading(false);
		console.log(data);
	}

	useEffect(() => {
		if (city == "Your Weather") {
			getCurrentLocation();
		} else {
			getWeatherByCity('city', city);
		}
	}, [city]);


	return (
		<div>
			<div className='main'>
				<ClipLoader className='react-spinners'
					color="#ffffff"
					loading={loading}
					size={150}
					aria-label="Loading Spinner"
					data-testid="loader"
				/>
				<WeatherBox weather={userWeather} />
				<WeatherButton cities={cities} setCity={setCity} loading={loading} setLoading={setLoading} />
			</div>
			<div>
			</div>
		</div >
	);
}

export default App;

그리고 어색한 로딩스피너의 위치를 옮겨주었다.

App.css

body{
	background-image : url(https://wallpaperaccess.com/full/5466320.jpg);
	height: 100vh;
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.main{
	display: flex;
	flex-direction: column;
	margin: auto;
	justify-content: center;
	justify-content: space-evenly;
	height: 100vh;
}

.weather-info-parents{
	display: flex;
	justify-content: center;
}

.weather-info{
	width: 800px;
	border: 3px solid #aec6fe;
	border-radius: 10px;
	color: white;
	background-color:rgba(108, 144, 202, 0.4);
	padding: 100px;
}

.weather-info-text {
	width: 100%;
	text-align: center;
	padding: 3px;
}

.cityButtonGroup{
	display: flex;
	justify-content: center;
	justify-content: space-evenly;
	align-items: center;
	position:relative;
	width: 100%;
	overflow: hidden;
}

.react-spinners{
	position:absolute;
	width: 100%;
	top: 30%;
	left: 47%;
}

이제, 여기서 로딩스피너가 돌아갈 때 weather info의 data 부분이 출력되지 않도록 하여 최종 코드를 완성한다.

App.js

import './App.css';
import { useEffect, useState } from 'react';
import WeatherBox from "./component/WaetherBox";
import WeatherButton from "./component/WeatherButton";
import ClipLoader from "react-spinners/ClipLoader";
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
	const [userWeather, setUserWeather] = useState(null);
	const [city, setCity] = useState("Your Weather");
	const cities = ['Your Weather', 'new york', 'toronto', 'paris', 'rondon'];
	let [loading, setLoading] = useState(false);


	const getCurrentLocation = () => {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition((position) => {
				const latitude = position.coords.latitude;
				const longitude = position.coords.longitude;
				getWeatherByCurrentLocation(latitude, longitude);
			});
		} else {
			alert("Geolocation is not supported by this browser.");
		}
	}

	const getWeatherByCurrentLocation = async (lat, lon) => {
		let url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=b13282392fd34dd9436686c7c7ecda83&units=metric`;
		setLoading(true);
		let response = await fetch(url)
		let data = await response.json();
		setUserWeather(data);
		setLoading(false);
		console.log(data);
	}

	const getWeatherByCity = async () => {
		let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=b13282392fd34dd9436686c7c7ecda83&units=metric`;
		setLoading(true);
		let response = await fetch(url) 
		let data = await response.json();
		setUserWeather(data);
		setLoading(false);
		console.log(data);
	}

	useEffect(() => {
		if (city == "Your Weather") {
			getCurrentLocation();
		} else {
			getWeatherByCity('city', city);
		}
	}, [city]);


	return (
		<div>
			{loading ? <div className='main'>
				<ClipLoader className='react-spinners'
					color="#ffffff"
					loading={loading}
					size={150}
					aria-label="Loading Spinner"
					data-testid="loader"
				/>
				<WeatherBox weather={null} />
				<WeatherButton cities={cities} setCity={setCity} loading={loading} setLoading={setLoading} />
			</div> :
				<div className='main'>
					<WeatherBox weather={userWeather} />
					<WeatherButton cities={cities} setCity={setCity} loading={loading} setLoading={setLoading} />
				</div>}
			<div>
			</div>
		</div >
	);
}

export default App;

App.css

body{
	background-image : url(https://wallpaperaccess.com/full/5466320.jpg);
	height: 100vh;
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.main{
	display: flex;
	flex-direction: column;
	margin: auto;
	justify-content: center;
	justify-content: space-evenly;
	height: 100vh;
}

.weather-info-parents{
	display: flex;
	justify-content: center;
}

.weather-info{
	width: 800px;
	border: 3px solid #aec6fe;
	border-radius: 10px;
	color: white;
	background-color:rgba(108, 144, 202, 0.4);
	padding: 100px;
}

.weather-info-text {
	width: 100%;
	text-align: center;
	padding: 3px;
}

.cityButtonGroup{
	display: flex;
	justify-content: center;
	justify-content: space-evenly;
	align-items: center;
	position:relative;
	width: 100%;
	overflow: hidden;
}

.react-spinners{
	position:absolute;
	width: 100%;
	top: 30%;
	left: 47%;
}

WeatherBox.js

import React from 'react'

const WaetherBox = ({ weather }) => {
	return (
		<div className='weather-info-parents'>
			<div className='weather-info'>
				<h3 className='weather-info-text'>도시 {weather?.name}</h3>
				<h2 className='weather-info-text'>지금 온도 {weather?.main?.temp} / 습도 {weather?.main?.humidity}</h2>
				<h2 className='weather-info-text'>너의 날씨는? {weather?.weather[0]?.description}</h2>
			</div>
		</div>
	)
}

export default WaetherBox

WeatherButton.js

import React from 'react'
import { Button } from 'react-bootstrap';

const WeatherButton = ({ cities, setCity }) => {
	return (
		<div className='cityButtonGroup'>
			{cities.map((item, index) => (<Button variant="primary" key={index}
				onClick={() => {
					setCity(item)
				}}
			>{item}</Button>))}
		</div>
	)
}

export default WeatherButton

728x90

'Javascript > React와 Node 같이 때려잡기' 카테고리의 다른 글

[React + Node 같이 때려잡기] (5) react one-way data flow + 위치 도시 기반 날씨 앱 계속 making (0)	2022.12.09
[React + Node 같이 때려잡기] (4) 위치 도시 기반 날씨 앱 (api 연결 기초작업, UI작업 ) (1)	2022.12.07
[React + Node 같이 때려잡기] (3) 리액트 클래스 컴포넌트, 라이프 사이클 (0)	2022.12.05
[React + Node 같이 때려잡기] (2) 리액트 가위바위보 게임 (0)	2022.12.04
[React + Node 같이 때려잡기] (1) 리액트의 컨셉 state (0)	2022.12.02

npm 리액트 로딩스피너

Example

'Javascript > React와 Node 같이 때려잡기' 카테고리의 다른 글

티스토리툴바