[TIL]230121_useEffect

grace·2023년 1월 20일

TIL/WIL

목록 보기

21/37

🤓 What I Learned Today

함수형 라이프사이클과 useEffect

를 공부하면서 useEffect를 더 자세히 사용하는 것을 알아보았다.

다시 한번 복습!

⭐️ useEffect: 상황에 따라 다양한 역할을 한다.

componentDidMountuseEffect 의 역할: 기본적으로 앱실행후 첫번째 렌더 후에 한번 실행이 된다.여기에선 주로 화면에 처음 보여줘야할 데이터들에 대한 api호출을 한다.

useEffect(()=>{

},[]);

//배열에 아무것도 없으면 componentDidMountuseEffect()처럼 작동

componentDidUpdateuseEffect 의 역할 두번째 매개변수인 배열에 state가 들어가 있다면 state값이 바뀔때마다 호출되는 componentDidUpdate 의 역할을 한다.state가 바뀌고 렌더후 호출된다
배열 안에 여러개의 state 가 들어있다면? 배열안에 여러개의 state를 구독하고 있다면 배열 안에 state중 하나라도 업데이트가 되면 해당 useEffect가 호출이 된다. 하지만 여러개의 state가 동시에 업데이트 되었다 해도 한번만 호출이 된다.

useEffect(()=>{

},[state]);

//배열에 state가 있으면 componentDidMount()+componentDidUpdate() 처럼 작용

🤔 Code Snippets


function App() {
  const [weather, setWeather] = useState(null);


  //현재위치 불러오기
  const getCurrentLocation = () => {
    // console.log("getCurrentLocation");
    navigator.geolocation.getCurrentPosition((position) => {
      let lat = position.coords.latitude;
      let lon = position.coords.longitude;
      // console.log("현재위치", lat, lon);
      getWeatherByCurrentLocation(lat, lon);
    });
  };

  const getWeatherByCurrentLocation = async (lat, lon) => {
    let url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=8bd176a0663e0fb1290a830d46a5d7fc&lang={lang}&units=metric`;
    let response = await fetch(url);
    let data = await response.json();
    // console.log("data", data);
    setWeather(data);
  };

  //conponentDidMount>
  useEffect(() => {
    getCurrentLocation();
  }, []);

 
  return (
    <>
      <div className="container">
        <div className="main">
          <WeatherBox weather={weather} />
        </div>
      </div>
    </>
  );
}

짠! 잘 나온다...

🚀 Challenges Experienced

하지만...여기서 끝나면 아쉬우니

각각 버튼을 눌렀을때 해당 도시의 날씨정보 가져오는 버튼을 추가해보려고 해봤다. 일단 UI 는 이렇게 짰고 현재 App.js 가 있고 기존 WeatherBox.jsx (=info)와 추가로 WeatherButton.jsx 만들었다. 이제 어떻게 해야할지 막혔다..

내가 해주고 싶은건 도시날씨 정보를 WeatherInfo.jsx 에 넘겨주고 싶은데...

자꾸 엄청난 에러밭이 나타났다. 왜 그런가 했더니 리액트는 단방향이라 부모->자식 한테는 정보를 줄 수 있으나 자식->자식은 절대 정보를 줄 수가 없다고 한다.

즉, props는 부모 컴포넌트와 자식 컴포넌트 사이에서 부모가 자식에게만 줄 수 있다고 하는 것이었다. 그러면 내가 해야할 일은 부모 컴포넌트인 App.js 에게 Weather Button 이 가지고 있던 city weather data를 주고 부모 컴포넌트에서 Weather Info 로 props 시켜 줘야한다.