REACT API 연동을 위해서는 useEffect
와 useState
를 함께 사용한다.
function App(){
const [data, setData]= useState([]);
useEffect(()=>{
function getData(){
fetch("https://restcountries.com/v3.1/all")
.then((response) => response.json())
.then((data) => setData(data));
};
getData();
}, [ ]);
return (
<div>
{data.map((country)=>(
<div className="Country">
<h2>{country.name.common}</h2>
<p>Population: {country.population}</p>
<p>Region: {country.continents}</p>
<p>Capital: {country.capital}</p>
</div>
)}
</div>
)
}
useEffect는 다음과 같이 사용한다.
useEffect(()=>{
function mounted();
return function cleanup();
}, [deps]);
즉, useEffect Hook은 아래 세 가지 경우를 관리한다.
- 컴포넌트가 처음 나타날 때 (mount)
- 컴포넌트가 사라질 때 (unmount)
- 컴포넌트가 업데이트 될 때 (re-render)
3번째 경우에 의해서 컴포넌트가 업데이트될 때 uesEffect()가 사용된다는 것을 확인했다.
즉, setState가 useEffect 안에서 사용되면 setState가 호출될 때마다 useEffect가 실행된다. (setState는 컴포넌트를 re-render시키니까!)
따라서 api가 반환한 데이터를 state로 받아서 setState로 업데이트하면 useEffect를 호출하여 반영할 수 있다.
API 호출 ➡ API로부터 data 반환 ➡ setState(data) ➡ useEffect() ➡ component mount
Stackoverflow (항상 고수분들께 많은 도움을 받고 있는...)
내용 수정 댓글 항상 환영합니다!