코알누-react의 lifecycle을 활용한 날씨앱 만들기-2(ui작업,날씨 데이터 보여주기)

 

코드 설명을 해보자면

화면 높이의 100% vh

반복되는 사진 없앨려면 no repeat

반복되는 사진은 없앴는데 짤린 부분이 보기싫으면 cover까지 해주면됨

 

 

 

이제 날씨 박스 만들기

- weatherBox라는 컴포넌트 만들어서 생성해주자

 

이 정도로 일단 해두고

버튼도 만들어 줄건데 이것도 컴포넌트로 만들지만 디자인 하기 귀찮아서 react의 bootstrap이란걸 사용해볼거다.

 

 

 

 

버튼을 생성후에 가운데 정렬을 하려고 했는데 한가지 문제가 발생했다.

<div class="container">
      <WeatherBox/>
     <WeatherButton/>
      </div>

display:flex때문에 

flexable하게 아이템 조절에는 너무 좋지만 div안에있는 모든 아이템들을 가로 정렬로 바꿔버린다.

flex의 방향을 바꿔줘야 하는데 flex-column으로 변경해주자

 

정렬이 잘된 모습

 

 

 

 

 

 

 

 

---

날씨 데이터 보여주기

weather date는 ui에 보여지는 데이터

그래서 특히나 그걸 state에 담아준다.

state에 담아주기 위해서 app으로 돌아간다.

 

const [weather,setWeather]=useState(null)
// weather데이터는 보여지는 데이터라서 일단 state에 담아준다.

 

const getWeatherByCurrentLocation = async(lat,lon)=>{
    let url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=0b99d295cfa7cbbaa3cdc197e28cacc4`;
    let response =  await fetch(url)
    let data = await response.json();
    setWeather(data);
  }


// 데이터가 왔을때 weather의 값을 넣어주어야 한다.

 

 

 

 

그래서 이 weather데이터를 어디서 보여줘야 하냐면 weatherBox에서 보여줘야함 근데 보내주기 위해서는 이 weather 정보를 props로 보내줘야 한다.

props는 object타입이다.

 

 

 

이렇게 받아와도 되긴 하지만 props안치고 불러오는 방법이 있다.

바로 Destructuring

가지고 오고 싶은 객체의 키값만 적으면 가능

 

 

 

import React from 'react'

const WeatherBox = ({weather}) => {

    console.log("weather?",weather)
  return (
    <div className="weather-box">
        <div>{weather.name}</div>
        <h2>30도 / 230화씨</h2>
        <h3>맑은 하늘</h3>
    </div>
  )
}

export default WeatherBox;

지금 에러가 뜬 이유가 weather의 처음 초기값은 null useEffects는 ui가 싹다 그려준 후에 작동한다. 그래서 weatherBox에서 weather을 보여주고 싶은데 null이라서 error가 떴다. (리액트 가위바위보 때랑 같음)

 <div>{weather?.name}</div>

&&랑 같은 역할인

삼항연산식 이 방법으로도 해결 가능하다. weather이 있어? 그러면 name을 보여줘

 

 

 

섭씨를 화씨로 바꾸는 방법

이제 paris버튼을 누르면 paris의 온도랑 화씨 온도 날씨 상태 이런정보를 가져오게 해보자 api만 가져오면 됨