날씨앱

https://github.com/ryu9663/weatherApp/tree/master

 

 

리액트를 이용해서 처음으로 직접 하나부터 차근차근 홈페이지를 만들어보았다.

 

 

검색창에 도시 이름을 적으면 sidebar의 목록에 도시들의 정보가 추가된다.

sidebar에 도시를 클릭하면 메인창에 클릭한 도시의 날씨정보가 나타나도록 했다. 아직 CSS는 하지 않았다.

 

state가 한 차례씩 밀리는 문제

아래 코드와 같이 작성하니 state가 한칸씩 밀려서 출력되었다.

예를들면 처음에 seoul을 입력하면 빈객체가 출력되고, paris를 입력했을때 seoul이 출력되고, jeju를 입력했을때 paris가 출력되었다.

 

const getWeather = async () => {
   ..생략..
    if(responseJson){
      
      setInfo(responseJson)
      console.log(responseJson.weather[0].main)
    }

  }
  function addCityList(info){//sidebar에 추가될 도시 리스트
    const newInfoList = [...infoList,info]
    setInfoList(newInfoList)
  }
  useEffect(()=>{
    getWeather(city)
    addCityList(info)
  },[city])

responseJson을 setInfo를 이용해 Info에 할당한 후, addCityList함수에서 setInfoList(newInfoList)하는 과정을 생략했다.

 

함수 addCityList를 없애고 getWeather안에 합쳐보았다.

const getWeather = async () => {
    ..생략..
    if(responseJson){
      const newInfoList = [...infoList,responseJson]
      setInfoList(newInfoList)
    }
  }

  useEffect(()=>{
    getWeather(city)
  },[city])

이렇게 하니 state가 밀리지 않고 원하는 대로 작동하였다.