에러 확인

프로젝트 진행 시 아마 가장 많이 마주쳤던 에러 메세지 였던 것 같다.

Uncaught TypeError: Cannot read properties of undefined (reading 'temp')

에러를 살펴보면,

{cod: ‘400’, message: ‘Noting to geocode’}

이 에러는 useEffect 관련 에러인데,
useEffect 는 처음 렌더링 시 특정 작업을 실행할 수 있도록 하는 Hooks 이다.

코드의 작동 순서는 위에서 아래로 내려가기에
먼저 getCurrentLocation 함수가 실행이 된다.
차순으로 getWeatherByCity 함수가 실행 되는데,
이 Effect 는 city 를 기준으로 Weather 를 가져오는데,
city 를 담고있는 State 의 초기 값은 아무것도 없는 “ “ 빈 값이다.

때문에 getCurrentLocation 함수는 호출이 되었지만,
getWeatherByCity 함수를 호출하는 과정에서
url 에 빈 값이 담긴 city 를 호출 했기에 에러가 발생한 것이다.

이 부분을 주석 처리 해 주면 정상적으로 렌더링이 된다.

에러 해결

그런데,
getWeatherByCity 함수를 주석 처리 한다면 State 로 받는 각 지역별 city 의 값은 어떻게 가져올까 ??

간단하다.
두개로 분리된 useEffect 를 조건을 걸어 하나로 합쳐주면 된다.

단,
상황에 맞게 getCurrentLocation 과 getWeatherByCity 가 호출이 되게끔 말이다.

Reference

https://stackoverflow.com/questions/46877169/error-400-nothing-to-geocode-with-openweathermap-api