코알누-react의 lifecycle을 활용한 날씨앱 만들기-4(도시별 날씨 가져오기)

이번에 하는게 최종보스

남은게 도시버튼을 누르면 도시에 맞춰서 정보가 바뀌는거

 

 

 

 고민하고 어떻게 하면 되나 생각하면 이런 난제에 부딪혔을 거다.

import React from 'react'
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import WeatherBox from './WeatherBox';


const WeatherButton = ({cities}) => {
    console.log("cities?",cities);
    const[city,setCity]=useState('')
    
    const searchByCity=(cityName)=>{
       setCity(cityName)
       let url = 'api.weather !@!@'
       let res = await fetch(url)
       let data = await res.json()
    }
  return (
    <div>
         <Button variant="warning">Current Location</Button>
        
        {cities.map((item,index)=>(
            <Button varient="warning" key={index} onClick={searchByCity}>{item}</Button>
        ))}
    </div>
  )
}

export default WeatherButton

도시가 바뀔때마다 url다시 api호출해서 날씨 정보 보여주는거 

 

// 1. 버튼을 클릭하면 onClick함수를 넣어주고 searchByCity 실행

// 2. searchBycity함수 만들고 어떤 city를 선택하는지는 알아야 하니까 

// 3. onclick뒤에 매개변수를 넘겨주고 (item)을

// 4. searchBycity매개변수에 cityName이라고 적어두고

 

// 5. cityName도 state로 담아두려고 const [city,setCity]=useState('')

 

// 6.  searchBycity함수 안에 setCity(cityName)을 넣어줄건데 

// 7.  cityName이 바뀌었으니까 url을 다시 호출해보자.

 

 

 

이 데이터 정보를 weatherBox에 보내줘야겠지

그런데.. 어떻게 보내지?? 

 

setWeather는 지금 app.js에 있음

 

 

 

지금 app에는 두 정보가 속해있다.

city weather data를 WeatherInfo한테 전달해줘야 하는거

 

이 데이터를 weatherInfo한테 전달해줘야 하는데 WeatherInfo랑 WeatherButton사이의 연결고리는 1도 없다. 이게 단점

 

우리가 해줄수 있는 것은 

app이 필요한 모든 state와 함수를 다 가지고 있음 city weather data도 가지고 있음

 

 

 

 

app이  city weather data같은 거를 자식(cities weatherButton)에게 넘겨준다.

자식이 city weather data를 이용하고 업데이트를 하는데

업데이트 하는 함수도 app이 미리 만들어가지고 날씨정보 업데이트 함수를 만들고 이 함수를 weatherButton한테 props로 넘겨준다.

 

요약: app이 모든걸 가지고 있고 필요한 정보는 자식들에게 넘겨준다.

자식들은 app이 준걸로만 작업을 하고 app이 나중에 정보를 받아다가 weather한테도 넘겨줄수 있게된다. 이런 원리를 적용

 

함수도 props로 전달 가능하다.

한마디로 app이 모든걸 가지고 있고 보내주기만 하는데 (함수도 보내줄수 있다는점)

  useEffect(()=>{
    console.log("city?",city)
  },[city])
  // 이 city state를 주시하고 있다가 city가 바뀌면 useEffect호출

 

 

 

 

---

app이 모든걸 가지고 있고 함수 포함

const [weather,setWeather]=useState(null)
  const cities = ['paris','new york','tokyo','seoul']

// weatherbutton.js
// 이 버튼은 받은 함수를 이용해서 city의 값을 바꿔준다.

import React from 'react'
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import WeatherBox from './WeatherBox';


const WeatherButton = ({cities,setCity}) => {
    console.log("cities?",cities);
  

   
  return (
    <div>
         <Button variant="warning">Current Location</Button>
        
        {cities.map((item,index)=>(
            <Button varient="warning" key={index} onClick={()=>setCity(item)}>{item}</Button>
        ))}
    </div>
  )
}

export default WeatherButton

// const WeatherButton = ({cities,setCity}) 부분이랑

// onClick={()=>setCity(item)}>{item}/</Button>부분

 

 

 const getWeatherBycity=()=>{
    let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid={API key}`
    // url을 가져온다.
  }


 useEffect(()=>{
    getWeatherBycity()
    console.log("city?",city)
  },[city])


const[city,setCity]=useState('')

useEffect에서 city값이 바뀐후에 호출하는 거니까 url을 가져오는건 비동기 처리를 해줄 필요가 없다.

각각 버튼을 클릭하면 그 도시의 날시정보가 콘솔에 찍힌다.

 

 

⌘ useEffect를 두번쓰면 날씨 정보를 불러오지 못하는데 useEffect를 합쳐주자.(상황에 맞춰서 호출을 달리해줘야 한다.)

 useEffect(()=>{
    if(city==""){
      getCurrnetLocation();
    }else{
  
    getWeatherBycity()}
  },[city]);

 

 

진짜 너무 어렵다. 과정이 힘들다.