fetch 함수의 기본적인 사용법은 다음과 같다.
fetch()함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다. 반환된 객체는 API호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject한다.
fetch(url, options)
.then((response) => console.log("response: ", response))
.catch((error) => console.log("error: ", error));실제 강의 세션에서의 예제
useEffect(() => {
fetch("data/footerData.json")
.then((res) => res.json())
.then((data) => {
});
}, []);fetch함수의 인자로 url 이후에 ", {method: "GET"}"의 형태로 옵션 객체를 받는데 "GET"이 default 인 상태이기 때문에 생략해도 좋다고 한다.
이 부분에 대해서는 차후에 자세히 알아보도록 하자.
문제는 .then .then이후 함수가 정의되는 부분에서는 data 외부에서 불러온 data를 활용할 수 있지만 useEffect 함수의 scope를 벗어나서 저 data를 활용하기 위해서 data라는 변수명(?)을 사용하면 당연한 이야기지만 "data is not defined"라는 오류메시지가 나오게 된다.
그럴때, 저 data의 형태를 보관해둘 수 있는 useState를 써서 scope 밖으로 보관해두고 함수 외부에서 활용할 수 있게 된다.
useEffect(() => {
fetch("data/footerData.json")
.then((res) => res.json())
.then((data) => {
setFooterData(data);
});
}, []);그럼 data가 setFooterData의 인자로 들어가 FooterData가 되고, FooterData라는 변수명으로 활용할 수 있게 된다.
비슷한 논리로 예전부터 간단한 JS예제나 코딩문제를 풀게 됐을 때, 자신이 정의한 함수의 반환값으로 함수 외부에서 활용하고 싶을 때, 방법을 알 수 없어 쩔쩔맸던 기억이 있다.
그럴 때, 함수 외부에 값을 할당하지 않은 빈 변수명이나 빈 배열을 선언해두고 함수의 반환값을 해당 변수명이나 배열에 할당하여 외부에서 활용하는 방법을 자주 쓰게 되었는데 같은 논리로 활용할 수 있을 것 같다.
