[ React ] To Do List 만들기 - 04 : fetch

 

 

[구현 기능] 기존에 axios를 이용하여 불러왔던 weather open api를 fetch로 부르기

 

Weather.jsx 파일 생성 

 

 

weather api를 불러올 때 편하게 사용 할 수 있도록 개인 key 와 주소를 전역 변수로 미리 선언해주었습니다. 

const api = {
	key : ' /* 개인 암호 키 */ ', 
    base : 'https://api.openweathermap.org/data/2.5/',
}

 

 

Weather 함수 컴포넌트 안에 오늘 날짜를 불러올 함수를 작성해줍니다. 

 const dateBuilder = (d) =>{
        let months = [
            "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월",
        ];
        
        //[주의]일요일 먼저 시작. 
        let days = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"]

        let day = days[d.getDay()];
        let month = months[d.getMonth()];
        let year = d.getFullYear();
        let date = d.getDate();
        return `${year}년 ${month} ${date}일 ${day}`;
    }

 

 

[1] Axios 로 open api 불러오기

const city = "Seoul";
const url = `${api.base}weather?q=${city}&appid=${api.key}`;
const [weather, setWeather] = useState([]);

//생략

axios.get(url).then((res) => {
	const data = res.data;
    setWeather({
    	id: data.weather[0].id,
        temperature: data.main.temp,
        main: data.weather[0].main,
        loading:false,    
    });
})

 

 

 

[2] Fetch로 open api 불러오기 

 

fetch로 open api를 불러올 때, 큰 에러가 하나 발생했었습니다. 불러오는 것은 문제가 없었는데 무한으로 api가 호출되어 서버에 부담이 실시간으로 누적되는 현상이 발생했었습니다. 

 

 

# 다음은 제가 초반에 작성했던 fetch로 작성한 코드입니다. 

//변수 선언부는 axios 와 동일합니다. 

fetch(url)
	.then(res => {
    	return res.json();
    })
    .then(data => {
    	setWeather({
        	id: data.weather[0].id,
            temperature: data.main.temp,
            main: data.weather[0].main,
            loading:false,
        })
    })

 

 

api가 불어와져 원하는 data의 값들이 화면이 출력되기는 했지만 무한으로 호출되는 api와 증가하는 빨간 알림은 두려움을 자아냈습니다.ㅎㅎ 한참을 구글링을 하다가 제가 놓친 중요한 요소를 찾았습니다.

 

useEffect ( ) : api를 초반에 한번만 호출할 수 있게 해주는 메소드 입니다. 

 

 

다음은 " useEffect( ) " 를 사용하여 수정한 코드입니다. ( 클릭시 공식문서 설명으로 이동합니다.)

//변수 선언부는 동일합니다. 

useEffect(() => {
	fetch(url)
    	.then(res => {
        	return res.json();
        })
        .then(data => {
        	setWeather({
            	id: data.weather[0].id,
                temperature: data.main.temp, 
                main: data.weather[0].main,
                loading: false,
            })
        })
}, []) //< -- 이곳이 point 입니다.

 

 

 

이쁘게 등장하는 오늘 자 서울의 날씨입니다! 중간에 저 사진 깨짐은 무시해주세요.. ㅎㅎ weather open api 에서 아이콘을 불러오는 시도를 하다가 실패한 흔적입니다. 이 부분에 대해서도 조만간 정리하겠습니다.

 

 

 

 

# 참고 블로그 : [React] useEffect 무한루프 탈출하는 방법

 

 

 

 

 

sendData라는 이름으로 {data} 파일을 보내는 거라서 <Contents.js>에서는 바로 {sendData}를 받고 sendData 를 변수마냥 이용해서 넘