React) 날씨 조회 프로그램 만들기

1. 현재 위치 정보 가져오기

navigator.geolocation.getCurrentPosition((position) => {
	let lat = position.coords.latitude;
	let lon = position.coords.longitude;
});

// navigator는 브라우저 내장 객체다. 
// navigator의 geolocation을 활용하면 지리적 정보를 얻을 수 있다.

 

2. 위치 정보와 날씨 api를 활용하여 날씨 정보 가져오기

무료 날씨 api인 OpenWeatherMap에서 key를 발급받아 사용

 

key와 함께 navigator를 통해서 가져온 위도, 경도를 인자로 전달하면 날씨 정보를 받을 수 있다.

 

정확도가 높은 편은 아니라 위치가 광명으로 나온다...ㅠ

 

3. component에 날씨 데이터 넘겨주기

 

weather state를 만들고 api 데이터를 useState를 사용하여 weather state에 담아준 뒤, 이를 WeatherBox에 props로 넘겨주면...

 

에러가 난다. 그 이유는 api에 데이터를 요청하고 setWeather를 하기 전에 이미 렌더링이 진행되면서 WeatherBox component를 그리는데, 이때 전달받은 props weather는 null이기에 weather.name이 없어서 에러가 찍힌다.

 

위와 같은 방법을 통해 해당 문제를 해결할 수 있다.

 

나머지 정보들도 받아서 화면에 뿌려주면...

 

일단 이렇게 필요한 정보는 모두 출력된다.

 

4. ui 만들기, 시간따라 배경화면 바꿔주기

box 안에 도시명과 섭씨 온도, 현재 날씨 상태 정보를 나타내주고 그에 따른 아이콘을 openweathermap에서 가져온다.

 

그 후 css를 입혀주고,

 

dayYN state를 하나 선언해준 뒤 낮과 밤에 맞는 배경화면 url을 가져온다.

 

그 후 받아온 api 데이터로 낮과 밤 여부를 state에 담아준 뒤,

 

해당 state 여부에 따라 배경화면이 바뀌도록 해주었다.

 

현재까지 완성된 모습

 

5. 다른 도시 날씨 정보 조회 버튼 추가

우선 cities 배열과 city state를 만들어준다.

 

그리고 WeatherButton component에 setCity 함수 자체를 cities와 함께 props로 넘겨준다.

 

WeatherButton component에서는 전달받은 cities로 반복문을 돌며 버튼을 그리고 setCity 함수를 클릭 이벤트로 입혀준다. 이때 My Location 버튼은 setCity의 인자값으로 빈 문자열을 던져준다.

 

이제 App component에서 현재 위치 정보가 아닌 도시명으로 날씨 정보를 받아오는 함수를 만들어주고,

(낮, 밤을 구하는 코드는  dayYnHandler라는 함수로 빼주었다.)

 

useEffect에선 city가 빈 문자열일때는 기존 api, city state가 있을 때는 getWeatherByCity 함수를 실행하도록 해주었다.

 

6. 완성본

현재 위치 날씨 정보

 

도쿄 날씨 정보