React { Fetch }

Fetch API 

 

웹에서 화면을 그릴때는 보통 서버에서 데이터를 받고 프론트에서 그 데이터를 바탕으로 화면을 구성하게 된다. 

일단 기본적인 Fetch 코드를 보자 

fetch('https://raw.githubusercontent.com/techoi/raw-data-api/main/simple-api.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

fetch로 API를 받아오고, response에 JSON을 가져오고 콘솔로 찍어보는것이다. 해당 JSON 데이터는 useState를 통해서 상태관리를 하고 배열함수를 통해 정보를 시각화 할 수 있다. 

    const App = () => {
      const [data, setData] = React.useState(null);
      const [error, setError] = React.useState(null);

      React.useEffect(() => {
        fetch('https://raw.githubusercontent.com/techoi/raw-data-api/main/simple-api.json')
          .then((response) => response.json())
          .then((data) => {
            setData(data.data)
          }).catch((error) => {
            setError(error.message)
          })
      },[])

      if(error != null){
        return <p>{error}</p>;
      }

      if(data == null){
        return <p>Loading...</p>
      }

이런식으로 useEffect를 통해 처음에 Fetch하여 데이터를 가져올때 Error를 관리할 수 있는데 여기서는 .catch로 에러의 데이터를 받아와서 setError에 담고,  Data가 null일때 Loading 을 뛰어 주고, error로 뭐가 잡히면 해당 에러메시지를 뛰어주는 코드당.

 

로딩, 데이터, 에러 상황별 핸들링을 살짝 볼 수 있었다. 

 

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch 사용하기 - Web API | MDN