에러 확인

변화하는 값을 관리하기 위해 useState Hooks 를 사용할때 발생한 에러이다.
먼저, State 값에 빈 값을 정의하기 위해 null 값을 부여하고

초기 값은 모르기 때문에 null 지정

Weather 데이터를 생성한 컴포넌트인 WeatherBox 에서 보여주어야 하기 때문에
Props 를 사용해 weather 데이터를 WeatherBox 에 보내준다.

여기서, Props 라는 object 안에서 weather 데이터를 가져오기 위해
ES6 문법인 Destructuring 을 사용하여 넘겨준다.

데이터를 확인 해 볼까?
가져온 weather 데이터에서 필요한 정보는,
name 과 온도를 나타내는 temp 일 것이다.

name 의 값을 가져온다.

?!

에러와 함께 화면에 보여지는 UI 들이 모두 사라졌다.

에러를 살펴보면,
‘weather 의 값이 null 이라 name properties 를 불러올 수 없다’ 고 한다.

에러 해결

이유는 간단했다.
useEffect 의 영향을 받아 에러가 발생한 것이었다.

useEffect Hooks 는 맨 처음 UI 가 렌더링 된 후 실행이 되는데,
그 때 당시의 weather 의 값은 null (초기값) 상태이므로
WeatherBox 에서 weather.name 을 보여주고 싶지만 null 이기때문에 에러가 발생한 것이다.

이를 삼항 연산식 혹은 조건부 렌더링 문법을 통해 수정해 주면 된다.

weather 가 참일경우(=값이 있을경우) .name 을 보여줘 !