[React] 리액트로 OpenWeatherMap API 사용하기

리액트로 간단한 날씨 위젯 만들기!

1. OPEN API 사용하기

https://openweathermap.org/

Сurrent weather and forecast - OpenWeatherMap

먼저 위 주소 회원가입 후 API KEY를 우선 발급받는다.

API KEY는 환경변수(env)를 설정해 저장해 놓는 것이 좋다.

// env
REACT_APP_API_KEY = "발급받은 key 넣기"

// 불러오기
const API_KEY = process.env.REACT_APP_API_KEY;

 

2. 위치 정보 가져오기

내가 만들 날씨 위젯은 위치정보(경도, 위도)를 가져와 해당 지역에 대한 날씨 정보를 가져오려고 한다.

useEffect(() => {
    navigator.geolocation.getCurrentPosition((position) => {
      let lat = position.coords.latitude;
      let lon = position.coords.longitude;
      getWeather(lat, lon);
    });
  }, []);

navigator.geolocation.getCurrentPosition는 사용자의 위치 정보를 비동기적으로 가져오는 함수

그래서 position 매개변수는 현재 위치 정보를 포함하고 있다.

getWeather함수를 호출하여 위도와 경도를 받고 해당 위치의 날씨 정보를 얻으려고 한다.

 

 

3. 해당 지역 날씨 정보 가져오기

const getWeather = async(lat, lon) => {
    try {
      const res = await axios.get(
        `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
      );

      // id 찾아서 매칭 후 description 한글 번역된 거 가져오기
      const weatherId = res.data.weather[0].id;
      const weatherKo = weatherDescKo[weatherId];
      // 날씨 아이콘 가져오기
      const weatherIcon = res.data.weather[0].icon;
      const weatherIconAdrs = `http://openweathermap.org/img/wn/${weatherIcon}@2x.png`;
      // 소수점 버리기
      const temp = Math.round(res.data.main.temp);

      setWeather({
        description: weatherKo,
        name: cityName,
        temp: temp,
        icon: weatherIconAdrs,
      });
    } catch (err) 
      console.error(err);
    }
  };

getWeather함수는 위에서 작성한 lat, lon 매개변수를 받고,
axios로 GET 요청을 보내는데 불러온 경도, 위도 그리고 발급받은 API_KEY를 이용해서 아래 URL로 날씨 정보를 받아오려고 한다.
https://api.openweathermap.org/data/2.5/weather?lat=$ {lat}&lon=${lon}&appid=${API_KEY}&units=metric 

 

요청이 성공하면 어떤 데이터가 들어올까?

이 정보가 무엇인지 궁금하다면? 아래 주소에서 확인 할 수 있다.

https://openweathermap.org/weather-conditions

 

 

나는 한글 지원되는 날씨 위젯을 만들고 싶어서 URL에 lang=kr 추가로 넣었는데 번역이 좀 이상한 것 같았다(?)

근데 구글링을 했더니 친절하게도 날씨 설명 번역된 걸 공유해주셨다.

https://gist.github.com/choipd/e73201a4653a5e56e830

OpenWeatherMap api의 다국어에 한국어 지원을 위한 협업용 파일

 

위 데이터 중 맨 아래의 데이터를 사용하려면 weatherDescKo[id] 이런식으로 작성을 하면 되는데

받아온 데이터의 id를 weatherId에 할당. weatherId를 키값으로 사용하여 매핑시키고 weatherKo에 넣어준다.

 

이 API는 날씨 icon도 제공을 해주는데 솔직히 별로 예쁘진 않지만,, 간단한 위젯을 만들어볼거기 때문에..!

받아온 데이터 중 icon 값을 가지고 아래 URL로 날씨 아이콘을 받아올 수 있다.

http://openweathermap.org/img/wn/$ {weatherIcon}@2x.png

 

마지막으로 temp 데이터를 가져와 소수점을 버리기 위해 반올림을 해준다.

 

위치, 날씨 정보는 상태관리를 해주기 위해 setWeather함수를 호출하여 상태 설정을 해주었다.

추가로 오늘 날짜까지 불러와주고 스타일링을 하면 간단한 날씨 위젯 만들기 완성!