React로 블로그 만들기 #2

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를 통해 다른 라우트로 이동하는 내용 추가