[React + Node 같이 때려잡기] (5) react one-way data flow + 위치 도시 기반 날씨 앱 계속 making

포스팅 위치 도시기반 날씨앱(4)에 이은 마무리 작업

 

App.js가 모든 로직을 다 갖고 있고, 컴포넌트에 보내주는 식으로 작업을 진행해보도록 한다.

react one-way data flow

때문이다. 컴포넌트 형제끼리 데이터를 주고 받기가 상당히 어렵다.

리액트 특징 one-way reactive data flow

https://tkssharma.gitbook.io/react-training/day-01/react-js-3-principles/one-way-data-

 

The foundation of understanding component relationships in React and parent component hierarchy…

위와 같이 작성하는 React 컴포넌트 중 state 를 사용하는 경우를 Stateful 컴포넌트라 하고, state 를 사용하지 않는 컴포넌트를 Stateless 컴포넌트 라 한다. 만약 state를 사용하지 않는 Stateless 컴포넌트로 작성할 수 있다면 최대한 state를 사용하지 않도록 컴포넌트를 구현해야 이해하기 쉽다. 이해하기 쉬워야 결과를 예측하기 쉽고 결과를 예측하기 쉬워야 버그나 유지보수가 쉬워진다.

 

요약 정리 : react one-way data flow에 따라, 부모에서 작식으로만 데이터를 전달할 수 있어

데이터는 부모가 들게 되는데, 이때 부모 컴포넌트는 stateful, 부모가 주는 데이터만 받는 컴포넌트는 stateless 컴포넌트로 구성해버리면 

state가 없는 stateless 컴포넌트는 재사용이 쉬워진다. (데이터 걱정없이 유지보수 해도됨. 중요 데이터는 모두 stateful 컴포넌트에 있음)

최대한 모든 컴포넌트를 stateless로 만들고 몇개의 stateful컴포넌트에서 데이터를 관리하는 구조가 이상적

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

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

function App() {
	const [userWeather, setUserWeather] = useState(null);
	const [city, setCity] = useEffect('');
	const cities = ['Your Weather', 'NewYork', 'Toronto', 'Paris', 'Rondon'];

	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);
	}

	useEffect(() => {
		getCurrentLocation()
	}, []);

	return (
		<div>
			<div className='main'>
				<WeatherBox weather={userWeather} />
				<WeatherButton cities={cities} setCity={setCity} /> 
			</div>
			<div>
			</div>
		</div >
	);
}

export default App;

 

<WeatherButton cities={cities} setCity={setCity} /> 
setCity는 함수이다. 이런 식으로 함수도 보내줄 수가 있다.

 

	useEffect(() => {
		console.log('city', city);
	}, [city]);

리액트 공식문서-useEffect

팁

React의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다.

 

 

 

 

다음 포스팅에서는 로딩스피너를 불러오는 것으로 날씨웹 만들기를 마무리하겠다.