🧐 개요
회원 관리...게시판...검색...업로드...다운로드...등등...
다소 평범한 기능들을 구현하고 나선
API를 끌어와 사용하는 방법을 익히고 있습니다.
그 중, React Hook에서의 날씨 API의 적용 방법을 정리합니다.
📋 Get API Key
위 홈페이지에 회원가입한 뒤,
https://home.openweathermap.org/api_keys
위 링크로 접속하면 Default API Key를 확인할 수 있습니다.
📋 axios.get(URL)
API 정보를 가져오는 방법은 위와 같습니다.
저는 Redux를 사용하는 환경이므로, 우선 action 부터 위와 같이 정의합니다.
사용자가 선택한 도시에 따라 값을 받아오도록 하기 위해
클라이언트에서 전달하는 프로퍼티값을 도시 이름으로 지정합니다.
API Key는 따로 Config.js 파일에서 가져오도록 했습니다.
📋 State Setting
State를 업데이트하기 전에, 먼저 값이 어떻게 전달되는지 확인합니다.
console.log(response.payload)
습도... 온도...시간대...풍향 등등 여러가지 정보가 담겨있습니다.
우선 가장 기본적인 온도와 날씨를 꺼냅니다.
특이한 점은, 이 API는 날씨에 따른 아이콘을 제공합니다.
response.payload.main.temp // 온도
response.payload.weather[0].main // 날씨
response.payload.weather[0].description // 상세 날씨
response.payload.weather[0].icon // 아이콘 URL String뽑아낸 정보로 State를 업데이트합니다.
특이점은 온도가 켈빈 단위로 출력된다는 점입니다.
우리에게 보기 쉬운 섭씨 온도로 변환했습니다.
켈빈 -> 섭씨 변환식 : (nK - 273.15)
또한 async / await 문법을 통해 서버로부터 정보를 받아온 뒤에
정보가 렌더링되도록 만듭니다.
📋 Icon 사용법
let iconurl = "http://openweathermap.org/img/w/" + Icon + ".png";
<img src={iconurl}/>Icon State에 응답에 있는 Icon 속성을 업데이트하고
위와 같이 작성하면 아이콘이 불러와집니다.
📋 렌더링 구조
useEffect 메서드로 City State에 변동이 있을 때
weatherFetch() 함수를 실행시켜 렌더링합니다.
앞서 서술했듯, weatherFetch() 함수는 async/await 문법을 통해
상태가 모두 업데이트된 뒤에 업데이트되도록 만들어두었기에
꼭 useEffect의 인자로 모든 상태를 넣을 이유가 없습니다.
반환될 DOM은
- css를 위한 부모 Div인 WeatherDiv
- 받아온 값을 렌더링하는 WeatherContainer
- 지역을 선택하는 select tag
로 마무리합니다.
📋 모듈화하기
지금은 LandingPage에만 API를 적용해두긴 했지만
혹시나 다른 컴포넌트에 적용할 수 있는 가능성이 있으므로
위와 같은 폴더 구조를 통해 날씨 API를 분리했습니다.
// landingPage.js에서 발췌한 부분입니다.
// Page에 필요한 렌더링은 divCon div tag에 ReactDOM.render로 보여집니다.
// 그 밑에 Weather 컴포넌트를 정의하고, 적당한 css로 날씨 부분을 배치합니다.
// 날씨 컴포넌트에 대한 css입니다. 오른쪽 상단에 고정시킵니다.🎯 결과 화면
