2. 날씨앱 만들기 (4)

1. 앱이 실행되자마자 현재 위치 기반의 날씨가 보인다.

2. 날씨 정보에는 도시, 섭씨, 화씨, 날씨상태가 들어간다.

3. 5개의 버튼이 있다. (1개는 현재위치, 4개는 다른 도시)

4. 도시 버튼을 클릭할 때 마다 도시별 날씨가 보인다.(나온다)

5. 현재위치 버튼을 누르면 다시 현재위치 기반의 날씨가 나온다.

6. 데이터를 들고오는 동안 로딩 스피너가 돈다.

 

lifecycle -> useEffect()

useEffect에는 파라미터,즉 매개변수가 2개가 들어간다! / 함수와 배열

함수안에 내가 해주고 싶은 내용을 쓰면 된다.

getCurrentLocation()함수-현재 위치를 가져오는 함수-를 생성한다.

왜냐하면 현재 위치를 가지고 와야 (현재 위치 기반의) 날씨가 보인다.

배열[]안에 아무것도 넣지 않으면... componentDidMount()처럼 발동을 한다.

랜더 후에 바로 실행된다.

 

const ~ : ~함수를 만들어준다.

실행이 잘되는지 확인하기 위해 console.log를 실행한다

 

 

weather정보가 바뀌는 건 당연히 state! - useState도 미리 추가!

 

현재 위치 기반의 날씨를 보이게 하기 위해서는 현재 위치를 가져와야 한다!

복사한다!

 

 

만약에 getCurrentPosition을 만드려면 또 const~로 해서 만들어주어야하는데 복잡하고 귀찮으니까....

매개변수 안에 바로 익명의 함수 만들어 버리기!

 

 

 

 

 

position이라는 매개변수를 넣어주어야 한다.

 

positon이라는 매개변수를 통해 latitude와 longitude의 정보(데이터)가 나온다. -> 엄청 중요하다!!!(매개변수를 꼭 넣어주어야 함!!)

 

latitude : 위도

longitude : 경도

 

 

 

 

현재 위치가 나왔으니 이제 뭘 하면 되냐?  그냥 api 호출하면 된다!

 

latitude와 longitude를 가져오는것 완료!!!

이제잠깐 멈추고 스스로 -api를 이용해서 현재 위치 날씨를 가져오기- 해봐라~