REACT API 연동

REACT API 연동을 위해서는 useEffect와 useState를 함께 사용한다.

App.js

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 Hook

useEffect는 다음과 같이 사용한다.

useEffect(()=>{
  function mounted();
  return function cleanup();
}, [deps]);
  

• mounted() : 컴포넌트가 나타날 때 / 업데이트 될 때 실행될 함수
• cleanup() : 컴포넌트가 사라질 때 실행될 함수
• deps : 의존값, deps가 변화할 때 useEffect 실행, 따로 없으면 빈 배열

즉, useEffect Hook은 아래 세 가지 경우를 관리한다.

1. 컴포넌트가 처음 나타날 때 (mount)
2. 컴포넌트가 사라질 때 (unmount)
3. 컴포넌트가 업데이트 될 때 (re-render)

API 연동 작동순서

3번째 경우에 의해서 컴포넌트가 업데이트될 때 uesEffect()가 사용된다는 것을 확인했다.
즉, setState가 useEffect 안에서 사용되면 setState가 호출될 때마다 useEffect가 실행된다. (setState는 컴포넌트를 re-render시키니까!)
따라서 api가 반환한 데이터를 state로 받아서 setState로 업데이트하면 useEffect를 호출하여 반영할 수 있다.

순서 정리

API 호출 ➡ API로부터 data 반환 ➡ setState(data) ➡ useEffect() ➡ component mount

참고 사이트

Stackoverflow (항상 고수분들께 많은 도움을 받고 있는...)
내용 수정 댓글 항상 환영합니다!