(React) OpenWeather api를 이용한 날씨앱 - 2

다른 도시들의 날씨 가져오기

우선, 날씨를 가져오고 싶은 도시들을 배열에 넣어준다. 이 배열은 props로 다른 컴포넌트에 넘겨 map을 이용할 것이다.

상태

날씨 정보가 계속 바뀌기때문에 useState로 날씨에 대한 상태를 만들었고,
도시도 선택하면 다른 도시들로 바뀌어야 하므로 상태를 만들었다. 도시를 선택하지 않으면 (빈칸이면) 현재 위치 기반의 날씨.

도시들의 날씨를 불러오는 api도 OpenWeather에서 구해 사용했다.

• getWeatherByCurrentLocation()과 마찬가지로 async/await 이용.
  

버튼 생성

도시 버튼을 누르면 해당 도시의 날씨 정보를 불러오도록 새로운 컴포넌트를 만든다. props로 cities와 setCity를 받아왔다.
버튼을 클릭하면 cities 배열을 펼쳐줄 수 있도록 map을 이용하였다. 버튼을 클릭하면 setCity에 배열의 item(도시 이름)이 담길 수 있도록 했다.

다시 app.jsx로 돌아와서 handleCityChange함수를 만들어준다. 이는, city가 "current"일 때 setCity에 초기값을 주어 getCurrentLocation()매소드를 불러오도록 한다. 이 handleCityChange는 Current Location 버튼에 onClick이벤트로 불러올 수 있도록 했다. (위의 사진 참고)

useEffect를 이용하여 city가 빈 값이면 getCurrentLocation()매소드를, 빈 값이 아니면 getWeaterByCity()매소드를 불러오도록 했다.
-> useEffect : 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook.

WeatherBox 컴포넌트 생성

날씨 정보를 렌더링하기 위한 컴포넌트가 필요하여 생성했다. (조건부 렌더링)
weather를 props로 가져와 api중에서 필요한 정보만 골라 사용했다.
(도시 이름, 기온, 날씨 설명)
기온은 toFixed(1)로 소수점 한자리까지만 보이도록 했다.

남은 것

• 데이터 로딩 시 로딩 스피너 사용
• css 만지기