리액트 네이티브로 날씨앱 만들기 #15 Hooking the Weather : Component to the weather data

이제 데이터가 있으니까, 날씨 컴포넌트로 돌아가서 refactoring을 해야해 리팩터링은 코드의 구조를 변경한다는 뜻이야

난 이 컴포넌트를 stateless 컴포넌트로 만들고싶어 그 뜻은 컴포넌트에 state이 없고, 클래스에서 만들지 않겠다는 뜻이야 function으로 만들거야 이걸 코멘트 처리하고- 위와 같이 입력 위의 코멘트 처리한 값을 복사-붙여넣기 에러 발생 export를 해야해! 날씨 컴포넌트는 크게 3가지 바뀌어

아이콘, 온도, 타이틀이야 이 뜻은 우리는 props가 필요하다는 뜻이지 어떤 종류의 날씨인지 먼저 알아야해 흐림, 천둥, 눈 등 말이야 그리고 온도가 필요해 일단 온도를 먼저 가져오자 실제 데이터를 불러올께 온도가 안뜨는 이유는 prop types를 불러오지않아서야 위와 같이 입력 위와 같이 입력

온도는 어떤 종류의 prop일까 temp는 숫자여야하겠지? 위와 같이 입력 에러 메시지가 뜰꺼야 왜냐면 필수조건인 temp 데이터를 전달하지않았으니까 appjs로 이동해서 weather를 render할때마다 temp도 render하도록! 위와 같이 입력 온도는 아마 켈빈으로 출력될꺼야

변환하는 방법은 간단해 math floor는 자바스크립트야 예를 들면, 187이라는 숫자가 있으면 숫자를 1로 '내림' 처리를 해 floor = 바닥 math ceil도 있는데, 이건 올림이야 1

78 이면 2로 올려버림 floor는 내림 178 을 1로 변환해 그래서 우리는 온도를 '내림' 처리할꺼고

그다음 위와 같이 입력 이렇게 바꿔주는 공식이야 저장, 새로고침하면 온도를 볼 수 있어 왜 16도일까? 내 생각에는 위치를 샌프란시스코로 잡은것같어 이제 온도를 잡았으니, 날씨이름을 결정해보자

날씨이름은 아까 말한것처럼, 흐림, 비옴, 천둥 같은거야 리스트를 만들건데 위와 같이 입력 첫번쨰 이름은 '비' '비' 이게 어디서 왔냐면, 오픈웨더 웹사이트로 이동 api > list of weather condition codes 여기있는 것처럼 천둥, 흐림, 비와 같은 이름들을 state 안에 저장할거야 지역정보를 잡으면, 온도를 잡게되고, 그리고 그 해당 날씨의 이름이 있어야겠지

눈, 맑음, 흐림, 엄청 많아 이제 온도가 있으니 이름을 줘야지

'비'는 3가지 요소가 있어 색상 제목, 아이콘 우선 색상부터 이건 gradient로 색상 농도가 달라 노란색에서 짙은 노락색으로, 초록색에서 파란색으로, 회색에서 검정색으로

이를 우리 array에 반영해야해 제목을 쓰자 부제목도 쓰고 그다음 색상을 가져올께 그다음 아이콘 이름 작성 중 맑음의 경우를 작성해보자 맑음, 위에서 다 복사-붙여넣기 일단 다 복-붙하고 자세한 내용은 하나씩 바꿀께 제목 변경, 아이콘 이름 변경, 복사-붙여넣기 천둥번개! 제목 변경 아이콘 이름 변경 – 이거 기억이 안나면 아이콘 영상을 복습하도록해

흐림! 제목 변경 아이콘 이름 변경 그다음 눈 이름 변경, 제목 변경, 부제 변경 아이콘 이름 변경 마지막

drizzle (이슬비) 제목, 부제 변경 게이 깃발도 넣고! 아이콘 변경 – 아이콘 어디서 오는 지 모른다면 복습하는거 잊지마 저장하고 살펴보자 오

맞다 색상! 노란색 색상 따오는 중 초록색 색상 따오는 중 회색 색상 따오는 중 눈 색상 따오는 중 이슬비 색상 따오는 중 이제 드디어 다 했어! 오예! 이걸 효과적으로 구현시키는 방법을 알려줄꼐 위와 같이 입력 이제 살펴보자 자동으로 변경된게 보이지? 이번엔 맑음으로 변경해볼까? 동일한 작업을 아이콘에도 수행해볼께 마찬가지로 색상도 변경 아앍

에러 발생 어머나 오타 (

) 오예! 된다! 이제 이걸 바꿀때마다 흐림, 맑음

변경이 될꺼야 왜냐, 우리가 만든 리스트로 가서 불러올테니까 이제 자동으로 나의 app에서 name을 불러오도록 해야해

위와 같이 입력 콘솔로그를 해서 진행사항을 볼수있게할꺼야 haze가 떴네 이게 뭐지? (안개 입니다) (당황했음 안개 없는 나라에만 살았나봄) 일단 haze를 drizzle로 바꿔놓을께

appjs에서는 name을 보내는거고, weatherjs에서는 이를 weather case로 내보냄 여기서는 날씨이름을 콘솔로그 하는거야 작성

날씨를 불러오면 response값이 방대하지 온도,이름

엄청 많아 그래서 이 이름을 weather 컴포넌트에게 줄꺼야 컴포넌트는 weather name이라는 prop을 ??? 컴포넌트 안에 weather cases가 있고

우리가 만든 그 리스트 이름을 전달하고, 그리고 원하는 색상 그래서 weather case > 그 다음 weather name > 다음 색상 모든 prop 마다 variable을 만든거야 case > name > color 이걸 하다보니 내가 모르는 날씨 haze, 안개, 가 나와서 일단 그걸 drizzle, 이슬비로 전환했어 다시 안개로 바꿀께 (어떻게 안개를 모를수가 있지??/) 여기까지야

질문있으면 언제든 알려주고 이제 진짜 거의 다했어 다음 강의에서 내 아이폰으로 테스트해볼꼐 복습! weather name을 전달하고, 이는 weather cases 에서 사용되는거야 다음 강의에서 보자구!