12. [Javascript] fetch() 함수로 웹 API로 JSON 데이터 받기

fetch

fetch() 함수는 JavaScript에서 네트워크 요청을 보내고 응답을 받을 수 있는 기능을 제공하는 웹 API입니다. fetch() 함수를 사용하여 서버와 데이터를 주고받을 수 있습니다.

 

fetch(url)
  .then(response => {
    // 응답을 처리하는 코드
  })
  .catch(error => {
    // 에러 처리 코드
  });

• fetch() 함수는 첫 번째 인수로 요청을 보낼 URL을 받습니다. 요청을 보내면 Promise 객체가 반환됩니다. 이후 then() 메서드를 사용하여 응답을 처리하거나 catch() 메서드를 사용하여 에러를 처리할 수 있습니다.
  
  

---

Fetch()로 JSON 데이터 받기

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터를 사용하는 코드
  })
  .catch(error => {
    // 에러 처리 코드
  });

• 응답을 처리하는 코드에서는 response 객체를 사용하여 다양한 작업을 수행할 수 있습니다. 일반적으로 response.json() 메서드를 호출하여 JSON 형식의 응답을 JavaScript 객체로 변환하거나, response.text() 메서드를 호출하여 텍스트 형식의 응답을 가져올 수 있습니다.
  
  
• fetch() 함수는 기본적으로 GET 요청을 보내지만, 다른 HTTP 메서드(POST, PUT, DELETE 등)를 사용하려면 추가적으로 설정이 필요합니다. 요청 헤더를 설정하거나 요청 본문(body)을 전달하는 등의 작업을 수행할 수 있습니다.

 

---

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    // 데이터를 사용하는 코드
  } catch (error) {
    // 에러 처리 코드
  }
}

• fetch() 함수는 Promise를 반환하기 때문에 async/await 구문과 함께 사용할 수도 있습니다.

---

 

fetch()와 map을 활용한 예시.

import React, { useEffect, useState } from "react";

function CoinTracker() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const url_coin = "https://api.coinpaprika.com/v1/tickers";
  //API url 담기
  useEffect(() => {
    //useEffect로 처음 마운트되었을 때만 랜더링 시키기
    fetch(url_coin)
      .then((response) => response.json())
      //응답받은 json 데이터를 파싱함
      .then((json) => {
        setCoins(json);
        //json을 SetCoins 함수를 이용하여 coins State에 입력함
        setLoading(false);
      })
      .catch((error) => {
        console.log("error!");
      });
  }, []);
  return (
    <div>
      <h1>Coin List ({coins.length})</h1>
      {loading ? <strong>loading...</strong> : null}
      <select>
        {coins.map((currentValue, index) => {
            //array형인 coins에 map 함수를 이용하여 가공된 <option>을 리턴해줌
          return (
            <option>
              {currentValue.rank}. {currentValue.name} ({currentValue.symbol}):{" "}
              {currentValue.quotes.USD.price}
            </option>
          );
        })}
      </select>
    </div>
  );
}

export default CoinTracker;

1. useState를 사용하여 loading과 coins라는 두 개의 상태 변수를 선언합니다. loading은 데이터 로딩 상태를 나타내는 Boolean 값이며, coins는 API에서 가져온 암호화폐 정보를 담는 배열입니다.
   
   
2. useEffect 훅을 사용하여 컴포넌트가 처음 마운트될 때 한 번만 실행되도록 설정합니다. 이 훅은 API를 호출하여 데이터를 가져옵니다.
   
   
3. fetch 함수를 사용하여 url_coin에 정의된 API URL로 GET 요청을 보냅니다. 이후에는 response.json()을 사용하여 응답 데이터를 JSON 형식으로 파싱합니다.
   
   
4. JSON 데이터를 받아온 후, setCoins 함수를 사용하여 coins 상태를 업데이트합니다. 이로써 암호화폐 정보가 coins에 저장됩니다. 또한, setLoading 함수를 사용하여 loading 상태를 false로 변경하여 데이터 로딩이 완료되었음을 표시합니다.
   
   
5. JSX 부분에서는 <h1> 요소를 사용하여 "Coin List (코인 개수)"를 표시합니다. {loading ? <strong>loading...</strong> : null} 구문은 loading 상태에 따라 "loading..." 메시지를 표시하거나 숨기는 역할을 합니다.
   
   
6. <select> 요소에서는 coins.map() 함수를 사용하여 coins 배열을 순회하면서 <option> 요소를 생성합니다. 각 암호화폐의 순위, 이름, 심볼, 가격 정보를 포함한 텍스트를 <option> 안에 넣어줍니다.

 

적용된 모습

※Coin 예제 출처: 노마드코더 ReactJS 강의