React로 블로그 만들기 #2
- Home 구성 및 Router 설정 -
1. src/Components 폴더 생성
- Home.js 생성
2. src/Components/Home.js
- Openweather API를 통해 날씨 정보 받아오기 : https://openweathermap.org/
- fetch API 사용
1) 위도와 경도를 통해 날씨 가져오기
- HTTP5 navigator.geoloaction 객체를 통해 위도와 경도를 가져올 수 있음
- navigator.geoloaction.getCurrentPosition(onSuccess, onFailure, options) : 사용자의 현재 위치를 가져옴
- 1번째 파라미터 : 성공시 콜백함수 정의
- 2번째 파라미터 : 실패시 콜백함수 정의
- 3번째 파라미터 : 옵션 ( timeout, maximumAge, enableHighAccuracy )
import React, { Component } from 'react';
const API_KEY = 'Openweather에서 받은 API KEY';
class Home extends Component {
constructor(props) {
super(props)
this.state = {
lat: 0,
long: 0,
temperature: 0,
name: '',
icon: '',
}
}
getPosition = () => {
const options = {
timeout: 10000,
enableHighAccuracy: true,
maximumAge: 0
};
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
this.setState({
lat: position.coords.latitude,
long: position.coords.longitude
});
},(error) => {
console.log(error)
},options);
}
this.getWeather();
}
getWeather = () => {
const { lat, long } = this.state;
fetch(`http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&APPID=${API_KEY}`)
.then(response => response.json())
.then(json => {
this.setState({
temperature: Math.floor(json.main.temp - 273.15),
name: json.weather[0].main,
icon: json.weather[0].icon,
});
});
}
componentDidMount() {
this.getPosition()
}
render() {
const { temperature, name, icon } = this.state;
const img_url = `http://openweathermap.org/img/w/${icon}.png`;
return (
<>
<h1>오늘의 날씨</h1>
<img alt="weather_icon" src={img_url}/>
<h3>온도 : {temperature}°C</h3>
<h3>날씨 : {name}</h3>
</>
);
}
}
export default Home;
- But, 해외 API라서 한국은 주요 지역(서울, 부산, 인천 등) 외에 정보 값을 제대로 받아오지 못함.
- 따라서 도시 이름을 통해 날씨 가져오기로 변경.
2) 도시 이름을 통해 날씨 가져오기
- 서울 날씨를 가져옴
import React, { Component } from 'react';
const API_KEY = 'Openweather에서 받은 API KEY';
class Home extends Component {
constructor(props) {
super(props)
this.state = {
temperature: 0,
name: '',
icon: '',
}
}
getWeather = () => {
fetch(`http://api.openweathermap.org/data/2.5/weather?q=Seoul&APPID=${API_KEY}`)
.then(response => response.json())
.then(json => {
this.setState({
temperature: Math.floor(json.main.temp - 273.15),
name: json.weather[0].main,
icon: json.weather[0].icon,
});
});
}
componentDidMount() {
this.getWeather()
}
render() {
const { temperature, name, icon } = this.state;
const img_url = `http://openweathermap.org/img/w/${icon}.png`;
return (
<>
<h1>오늘의 날씨</h1>
<img alt="weather_icon" src={img_url}/>
<h3>온도 : {temperature}°C</h3>
<h3>날씨 : {name}</h3>
</>
);
}
}
export default Home;
3. React Route 설정
1) 패키지 설치 및 파일 생성
- yarn add react-router-dom
- src/Routes 폴더 생성
- src/Routes/index.js : 모든 컴포넌트를 한 파일로 관리하기 위한 파일
- src/Routes/Router.js : 라우트 설정
2) src/Routes/index.js
- Home 컴포넌트 추가
- 앞으로 만들 모든 컴포넌트를 이 파일에 추가함
export { default as Home } from '../Components/Home';
3) src/Routes/Router.js
- 별다른 기능이 없으므로 함수형으로 작성
- '/'일 경우 Home 컴포넌트를 보여주도록 정의
- exact는 주어진 경로와 정확히 맞아야지만 설정한 컴포넌트를 보여줌
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import { Home } from './index';
const Router = () => (
<Switch>
<Route exact path="/" component={Home} />
</Switch>
);
export default Router;
3) src/App.js
- Content영역에 Router 컴포넌트 추가
- 이제부터 라우트 정의된 컴포넌트는 Content영역에 표시됨
import React, { Component } from 'react';
import styled from 'styled-components';
import Header from './Layout/Header';
import Navigation from './Layout/Navigation';
import Router from './Routes/Router';
class App extends Component {
render() {
return (
<Layout>
<Header />
<Navigation />
<Content>
<Router />
</Content>
</Layout>
);
}
}
4) src/index.js
- 웹 어플리케이션에 BrowserRouter를 적용
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<Router>
<App />
</Router>
, document.getElementById('root'));
4. 결과 확인
- 디자인(Styled-Components)은 Home 컴포넌트 내용 좀 더 추가 후 나중에 수정할 예정
- 다음 챕터에서는 Link를 통해 다른 라우트로 이동하는 내용 추가
