[React Native] React Native로 날씨앱 만들기 (9) - Displaying Temperature

먼저 온도부터 맞추자. 현재 화씨온도 292.23 를 섭씨온도로 바꿀것이다.

 

현재 사용하고 있는 API Current weather data 에서 Units of measurement를 보면 2가지 옵션이있다.

 

units=imperial 과 units=metric 이 있다.

metric은 섭씨온도를 원할때 imperial은 화씨온도이다. 화씨를 누가쓰나? metric을 쓰자

url 뒤에 &units=metric을 붙이고 저장.

 

화씨온도였던 292 에서 섭씨온도 19도로 바뀐것을 확인할 수 있다.

이제 날씨 정보를 보여줄 Weather.js 컴포넌트를 만들어 보자.

props를 몇개 가질것이기 때문에 prop-types를 install 하자.

npm install prop-types

 

Weather.js 

 

 

이제 App.js 에서 Weather 컴포넌트를 가져오자.

Weather 를 가져오면서 prop로 temp를 넘겨준다.

 

온도를 잘 가져온걸 확인하고 다시 Current weather data API를 보니 아이콘이 있는 Weather Conditions 목록이 있다.

openweathermap.org/weather-conditions

Weather Conditions - OpenWeatherMap

 

 

state에 condition과 isLoading과 temp가 잘 들어왔다.