노마드코더 리액트 네이티브 입문 - 3

open weather API 사용하여 날씨 연동시키기

https://openweathermap.org/api

Weather API - OpenWeatherMap

 

1. 로그인/회원가입 후 API Key 발급

2. https://openweathermap.org/current 또는 https://openweathermap.org/forecast5에서 api call 을 fetch 해주기 (강좌에 나온 doc은 무료 api 에선 불가하다고 함)

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}

api.openweathermap.org/data/2.5/forecast?lat={lat}&lon={lon}&appid={API key}

해당 api (둘다 순서대로)를 fetch 로 읽어와서 json 변경을 해주면 위와 같은 값을 얻을 수 있다.

이제 받은 데이터를 바탕으로 입맛대로 변경해주면 된다

나의 경우엔 아래의 정보를 사용하는 것이 좋다는 덧글을 보고 아래의 api 를 사용했다.

 

 

3. 그 전에 정보를 불러오면서 사용할 로딩바를 넣어준다

https://reactnative.dev/docs/activityindicator

ActivityIndicator · React Native

사용법은 size 나 color 속성을 지정해주는 방식으로 간단하다.

이는 날씨 정보를 읽어오지 못했을 때 띄워준다.

 

4. 날씨 정보를 map 을 사용하여 뿌려주기

받아온 날씨 정보는 많기 때문에 map 으로 반복문을 사용해준다.

추가로 api 옵션 중 units=metric 을 사용하여 섭씨온도로 바꿔준다. (디폴트는 화씨온도)

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);

즉 불러오는 api는 이런 형태가 된다.

 

<ScrollView 
  pagingEnabled
  horizontal 
  showsHorizontalScrollIndicator={false}
  contentContainerStyle={styles.weather}>
    {days.length === 0 
      ? (<View style={styles.day}>
          <ActivityIndicator size="large"/>
        </View>)
      : days.map((el, idx) => {
        return (
          <View style={styles.day} key={idx}>
            <Text style={styles.temp}>{el.main.temp.toFixed(1)}</Text>
            <Text style={styles.description}>{el.weather[0].main}</Text>
          </View>
        );
      }
    )}
</ScrollView>

 

5. 아이콘 넣어주기

기본적으로 npx create-expo-app 해준 프로젝트는 @expo/vector-icons 패키지도 같이 깔리게 된다고 함

https://docs.expo.dev/guides/icons/

Icons

 

사용법은 아이콘 패키지를 import 해줘서 꺼내 쓰는 것인데

import { Fontisto } from '@expo/vector-icons';

사용할 수 있는 아이콘은 https://icons.expo.fyi/ 여기에 목록이 존재한다.

Filters 에서 보면 각 회사별로 아이콘을 확인 가능하다. 나는 그 중에서 Fontisto 라는 회사가 만든 아이콘을 선택한 것이다.

<Fontisto name="day-sunny" size={24} color="black" />

name 부분에 원하는 아이콘명을 넣어줘서 지정해줄 수 있으며

이 아이콘명을 받아온 open weather Api 와 대조하여 맞춰주는 과정이 필요하다.

 

const icons = {
  "Clouds" : 'cloudy',
  'Clear' : 'day-sunny',
  'Rain' : 'rains',
  'Wind' : 'wind',
  'Snow' : 'snow',
  'Thunderstorm' : 'lighting',
  'Drizzle' : 'rain',
  'Atmosphere' : 'cloudy-gusts',
}

 

{days.length === 0 
  ? (<View style={styles.day}>
      <ActivityIndicator size="large"/>
    </View>)
  : days.map((el, idx) => {
    return (
      <View style={styles.day} key={idx}>
        <View style={styles.tempContainer}>
          <Text style={styles.temp}>{el.main.temp.toFixed(1)}</Text>
          <Fontisto name={icons[el.weather[0].main]} style={styles.icon} size={64} color="black" />
        </View>
        <Text style={styles.description}>{el.weather[0].main}</Text>
      </View>
    );
  }
)}

완성! 다음에는 Todo 리스트 라고 한다.