[React]Naver Clone(3) - 네비게이션바 꾸미기(위치에 따른 날씨 제공, 슬라이더)

날씨 알려주기

1️⃣위도 경도 얻기

getCurrentPosition을 통해 위도와 경도를 얻어올 것이다.

const [lat,setLat] = useState(0);
const [lon,setLon] = useState(0);
...
const getLocation = () => {
    navigator.geolocation.getCurrentPosition(function(pos) {
        setLat(pos.coords.latitude);
        setLon(pos.coords.longitude);
    }); 

}

 

 

2️⃣ 위도와 경도를 통해 해당 위치의 날씨 얻기

https://sand8594.tistory.com/17

[노마드코더] 바닐라JS 공부 8일차 (Weather)

해당 포스팅에서 썼던 weather API를 한 번 더 사용해 주었다

const [url, setUrl] = useState("");
...
const getLocation = () => {
    navigator.geolocation.getCurrentPosition(function(pos) {
        setLat(pos.coords.latitude);
        setLon(pos.coords.longitude);

        setUrl(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`);

    }); 

}
...
const getWeather = () => {
    axios.get(url).then(res=> {
        const newWeather = {
            temp: res.data.main.temp,
            tempMax :res.data.main.temp_max , 
            tempMin:res.data.main.temp_min , 
            des:res.data.weather[0].description,
            name: res.data.name
        };
        setWeather(newWeather);
        console.log(weather)
    })
}

 

3️⃣ useEffect로 불러오기

처음엔 

useEffect(()=> {
    getLocation();
    getWeather();
},[])

위의 코드로 적었는데 이렇게 하니까 새로고침했을 때는 정보를 불러오지 못 하고 

자꾸 저렇게 되길래 왜 저러는 거지..? 하고 이유를 찾아봤다

 

렌더링이 제대로 되지 않은 거 같은데 도대체 왜???하고 찾다가 이유를 못 찾았다...........................ㅜㅜ

 

근데 코드를 수정하면서 저장하면 화면에 제대로 뜨긴 한다......왜 저러는 거임 대체???

ㅜㅜ하 몇시간동안 찾았는덴 이유를 모르겠어서 일단 넘어가

 

애니메이션 넣기

저 애니메이션은 framer-motion을 통해 넣어주었다

간단함!

const variants = {
    hidden: {
        y: 50,
    },
    visible: {
        y: 0,
    },
    exit: {
        y: -50,
        
    },
  };
...
const [index, setIndex] = useState(0);
...
useEffect(()=> {
    const loop = setInterval(() => {
        setIndex(prev => prev === 1? 0 : prev + 1);
    },4000)
    return () => {
        clearInterval(loop);
    };
},[])
...
<AnimatePresence initial = {false}>
        <WeatherWrap
        variants={variants}
        initial="hidden"
        animate="visible"
        exit="exit"
        key = {index}
        >
            {index===0 ? 날씨wrap : 미세먼지Wrap}
    	</WeatherWrap>
</AnimatePresence>