[React JS] Coin Tracker만들기

Coin.js 

function Coin() {
  const [loading, setLoading] = useState(true);
  //coins의 기본값으로 []최소 빈배열을 주는 이유는 .length했을 때 undefined는 길이를 갖고 있지 않기 때문이다.
  const [coins, setCoins] = useState([]);
  useEffect(() => {
    fetch('https://api.coinpaprika.com/v1/tickers?limit=100')
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);
  return (
    <div>
      <h1>The Coins! {loading ? '' : `(${coins.length})`}</h1>
      {loading ? (
        <strong>Loading ... </strong>
      ) : (
        <ul>
          {coins.map((coin, id) => (
            <li key={id}>
              {coin.name} ({coin.symbol}) : ${coin.quotes.USD.price}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}
export default Coin;

 

---

 

fetch() 함수 (브라우저 내장함수 window.fetch())

• Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 fetch() (en-US) 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있습니다.
• 1번째 인자는 URL, 2번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다. 
  • 반환된 객체는 API 호출이 성공했을 경우에는 응답(reponse) 객체를 resolve하고, 실패했을 경우에는 예외(error)객체를 reject합니다. 
  • 디폴트로 GET방식으로 작동하고 있고 GET방식은 요청 전문을 받지 않기 때문에 옵션 인자가 필요없음 
  • 대부분의 REST API들은 JSON 형태의 데이터를 응답하기 때문에, 응답(response)객체는 json() 메서드를 제공합니다.
  • json() 메서드를 호출하면, 응답(response)객체로부터 JSON 포멧의 응답 전문을 자바스크립트 객체로 변환하여 얻을 수 있음 

 

fetch('api url')
.then(response) => response.json())
.then((data) => console.log(data));

-> 단순히 특정 API에 저장된 데이터를 보여주는 웹페이지나 어플리케이션에서는 GET방식의 HTTP 통신으로 충분, 우리가 Coin.js 에서 사용한 방식도 GET 방식입니다. 

Post 호출 

원격 API에서 관리하고 있는 데이터를 생성해야 한다면 요청 전문을 포함할 수 있는 POST방식의 HTTP 통신이 필요하다. 

• method 옵션을 POST로 지정해주고, headers 옵션을 통해 JSON 포멧을 사용한다고 알려줘야 한다.
• 요청 전문을 JSON 포멧으로 직렬화하여 가장 중요한 body 옵션에 설정해준다. 

fetch("URL", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
}).then((response) => console.log(response));

+ 응답 객체의 json() 메서드를 호출하면 응답 전문을 객체 형태로 얻을 수 있음

 

---

Coin.js에 있는 코드

 fetch('https://api.coinpaprika.com/v1/tickers?limit=100')

• 위의 코드에서는 API URL + ?limit=100 라는 코드로 이루어져있는데 뒤의 코드는 쿼리스트링을 사용한 것으로 "100개의 정보만 가져오는 것을 리미트로 제한하게 해줍니다. 제한한 이유는 데이터의 양이 10000개가 넘어가서임-> 크롬 개발자도구 network -> preview 하면 오류 메세지인 "failed to load response data request content was evicted from inspector cache" 가 뜨는데 검색결과 데이터의 양이 크롬 inspector가 감당할 수 있는 범위에서 벗어나면 이런 메세지를 띄우는 거 같다. 콘솔 창에도 원인을 알려주는 에러 메세지("데이터 양이 초과됐다!")가 뜬다.
• 쿼리문을 사용하여 불러오는 데이터의 수를 100개로 제한해주면 다시 preview를 봤을 때, 정상적으로 내용물을 보여준다. 

https://api.coinpaprika.com/v1/tickers?limit=100