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
