[React Native] 날씨 앱 만들기(3) feat. Nomad Coader

˚ UI 스타일링

˚ 위치 정보 가져오기

˚ 날씨 API 연동

˚ 날씨 정보 표시 및 로딩 처리

˚ 아이콘 적용 및 스타일링

---

이번에는 날씨 앱의 핵심인 OpenWeatherMap API를 연동하여 날씨 데이터를 가져오는 방법을 알아볼 거예요 😁

이전에 사용자의 위치 정보를 받아오는 방법에 대해 작성했었는데요, 이제 그 위치 정보를 바탕으로 실시간 날씨 데이터를 API로 요청하는 과정을 살펴보겠습니다 !

---

1. OpenWeatherMap API란? 🌤️

OpenWeatherMap은 날씨와 관련된 다양한 정보를 제공하는 무료 API입니다.

이 API를 사용하면 현재 날씨뿐만 아니라, 시간별 및 주간 예보와 같은 다양한 날씨 데이터를 요청할 수 있어요.

Weather API - OpenWeatherMap

 

우리는 이 API를 사용해, 사용자의 현재 위치를 기반으로 5일간의 날씨 예보 데이터를 받아올 예정입니다.

이 API는 날씨 정보뿐만 아니라, 온도, 습도, 바람 등도 함께 제공합니다.

5 day weather forecast - OpenWeatherMap

 

API를 사용하려면 API Key가 필요하니, 먼저 OpenWeatherMap 웹사이트에서 회원가입하고 API Key를 발급받아주세요.

---

2. 날씨 API 요청 코드 작성하기 🛠️

우선, 사용자의 위치 정보를 바탕으로 날씨 정보를 요청해 볼게요.

우리는 fetch 함수를 사용해 HTTP 요청을 보내고, 비동기 방식으로 응답을 처리할 거예요.

const [city, setCity] = useState('Loading...');  // 도시 이름 상태
const [days, setDays] = useState([]);  // 날씨 예보 데이터
const [ok, setOk] = useState(true);  // 권한 여부 상태

const API_KEY = "YOUR_API_KEY";  // OpenWeatherMap에서 발급받은 API Key

const getWeather = async () => {
  const { granted } = await Location.requestForegroundPermissionAsync();  // 위치 권한 요청
  if (!granted) {
    setOk(false);  // 권한 거부 시 상태 업데이트
    return;
  }

  // 현재 위치 정보 가져오기
  const { coords: { latitude, longitude } } = await Location.getCurrentPositionAsync({ accuracy: 5 });

  // 도시 이름 얻기
  const location = await Location.reverseGeocodeAsync({ latitude, longitude }, { useGoogleMaps: false });
  setCity(location[0].city);  // 도시 이름 저장

  // OpenWeatherMap API로 날씨 데이터 요청
  const response = await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`);
  const json = await response.json();
  setDays(json.list);  // 날씨 데이터를 상태로 저장
};

useEffect(() => {
  getWeather();  // 컴포넌트가 처음 렌더링될 때 날씨 정보 요청
}, []);

• fetch : OpenWeatherMap API로 HTTP 요청을 보내고, 응답을 받아오는 함수입니다. latitude와 longitude를 URL 파라미터로 사용해 사용자의 위치에 맞는 날씨 데이터를 요청합니다.
• json.list : 응답으로 받은 날씨 데이터는 list 배열에 저장되며, 각 시간대별로 날씨 정보가 포함되어 있습니다.
• setDays : 받아온 날씨 데이터를 state로 저장해 UI에서 사용할 준비를 합니다.
• API_KEY : 발급받은 API Key는 반드시 URL에 포함시켜야 합니다. 또한, units=metric 옵션을 추가해 섭씨온도로 데이터를 받아옵니다.

실습이고 무료 API Key이기 때문에 현재는 코드에 바로 작성하지만, 코드에 key를 바로 작성하는 건 안전한 방법이 아니라는 것은 알고 있어야 합니다 !

---

3. API 응답 데이터 살펴보기 🧾

API로 요청을 보내면 OpenWeatherMap은 날씨 데이터를 응답해 줍니다. 이때 받은 데이터를 list 배열로 확인할 수 있어요.

예를 들어, list 배열의 첫 번째 객체를 확인해 보면 다음과 같이 다양한 날씨 정보가 포함되어 있습니다.

• main.temp : 현재 온도
• main.feels_like : 체감 온도
• weather[0].main : 날씨 상태 (예: "Rain", "Cloud")
• weather[0].description : 날씨 설명
• dt_txt : 예보 날짜와 시간

우리는 여기서 온도(temp), 날씨 상태(main), 날씨 설명(description)을 사용해 UI에 날씨 정보를 표시할 수 있어요🙂

 

API 요청이 성공적으로 완료되면 days 배열에 날씨 예보 데이터가 저장됩니다.

이 상태에서 콘솔에 데이터를 출력해, 올바르게 데이터를 받아왔는지 확인해 볼 수 있습니다🙂

console.log(days);  // 받아온 데이터 확인

---

다음에는 날씨 데이터를 화면에 표시하고, 로딩 상태를 처리하는 방법에 대해 작성할 예정입니다 !