2. 날씨앱 만들기 (10)

우리는 UI도 있고, 데이터도 있고, 이제 데이터를 보여주면 된다

 

App.js

weather 데이터는 UI에 보여지는 데이터

이걸 state에 담는다

[weather, setWeather] = whether의 값을 넣어주어야 한다. 언제? 데이터가 왔을때 쓱 넣어주어야 한다.

 

App.js

setWeather(data)로 state에 값 넣어주기!

 

weather를 WeatherBx에서 (데이터를) 보여주어야 한다.

 

weather 정보를 props로ㅓ WeatherBox에 보내기

 

App.js

 

 

props는 object타입이다.

 

이것도 가능하지만 매번 props를 칠수는 없다.

따라서 es6문법의 destructuring을 사용하면 아래와 같이 사용하면 된다.

 

 

 

 

 

but,,,
새로고침을 하니까 에러가 나옴 ㅜㅜ

"많이 본 에러"

 

null이라서 name이라는 필드가 없어요!

 

weather의 초기값은 null

 

useEffect()는 언제 작동되느냐? UI가 작성된 후!

처음에 UI를 그릴 때 당시에는 weather에 값이 null이다.

{weather.name}을 보여주고 싶은데 null이라서... null.name은 존재하지 않는다.

 

<해결>

방법①

import React from 'react'

const WeatherBox = ({weather}) => {
  console.log("weather?", weather);

  return (
    <div className="weather-box">
        <div>{weather && weather.name}</div>
        <h2>30도</h2>
        <h3>맑은 하늘</h3>
    </div>
  )
}

export default WeatherBox

 

<&& : 조건부 렌더링>

 

방법②

import React from 'react'

const WeatherBox = ({weather}) => {
  console.log("weather?", weather);

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

export default WeatherBox

<삼항연산식>

weather?.name 

weather가 name이 있으면 보여주세요

weather가 참이면 ?뒤를 보여준다.

weather가 거짓이면 아무것도 보여주지 않는다.