[React Native] 날씨 어플 만들기 - 날씨 정도 가져오기

16 일간의 일기예보를 받아올 테니깐 빈 배열을 가지는 state를 생성해 주자.

날씨 정보를 받아오기 위해

https://openweathermap.org/api/

(API key 를 마이 페이지에서 발급받자)

이 사이트를 이용할 것이다.

fetch 는 url을 읽어주는 역할을 한다.
또한
fetch 는 서버의 응답을 기다리는 promise 이다.

fetch 를 통해 API 로 부터 응답을 받고

응답을 받은걸 JSON 형식으로 변환하는 것을 한번 더 받자

중요하니깐 크게 보자

공식문서 를 보면 우리가 필요한건 daily 이니깐

console 로 json.daily 를 출력하자

콘솔을 찍어보면!!

이야 나온다!
그래도 콘솔로 계속 보기 힘드니 콘솔창에서 d 를 누르거나 아니면 주소창에 직접 입력하여 개발자 창에서 보면 더 가독성 좋게 보인다.

setDays 에 json.daily를 받아주면 된다.

이제 우리가 할 일은 우리가 받은 API의 구조에 기반해서 UI를 구성해 주는 것이다.

날씨를 불러오는데 로딩중이라면 로딩중이라는 거를 표시해주자.

문자열로 Loading 적어주기 보다는 ActivityIndicator 라는 것을 사용해 보자.

(안드로이드에서는 컬러랑 사이즈를 주고 나서 콘솔에서 r 로 재실행을 시킬때만 보이더라)
style 도 잘 적용됨을 볼 수 있다.

이제 days 를 보여주기만 하면 된다.

days는 배열이고 그럼 뭐다?

map

받아온 API 의구 구조에 기반해서 값을 집어넣어주자.

이렇게 함으로써 소수점 한자리 까지만 표시되게 할 수 있다.

• 호출을 위해 API의 구조를 파악하고 싶을때

console.log(json) 

을 통해 json 파일을 펼쳐놓고 그 안에서 daily Object 의 내용을 살펴보면 된다. 그 안에서 구조를 찾아 가면 된다. 개발자 웹에서 찾아보면 된다.

소괄호 : 감싸고 싶은 문자열 드래그 해서 블록 지정 + Shift + (
중괄호 : 감싸고 싶은 문자열 드래그 해서 블록 지정 + Shift + {

https://nomadcoders.co/react-native-for-beginners/lectures/3127