[React] 11. 리액트 스터디 - fetch

[ fetch ]

api 형태로 데이터를 가져올 때 사용 

api 호출 후 받아온 데이터를 json 형태로 출력하여 사용하게 된다.

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

 

[ fetch를 활용하여 코인 정보 가져오기 ]

- fetch를 이용하며 코인 정보를 받아와서 select box에 리스트를 출력

- input box에 값을 입력하거나 select box의 변경 이벤트가 있을 경우 입력한 값과 코인의 값을 통해 환산 정보를 화면에 출력

 

import { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [cost, setCost] = useState(1);
  const [inputCost, setInputCost] = useState(1);
  // useEffect 2번째 인자가 비어있는 경우는 감시 대상이 없으므로 
  // 최초 1회만 실행이 된다. 복습~
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
        // select box에 출력될 1번째 항목의 값을 state에 저장
        setCost(json[0].quotes.USD.price);
      });
  }, []);


  const onChange = (event) => {
    // select box 가 변경될 때 마다 해당 항목의 값을 state에 저장 
    setCost(event.target.value);
  };

  const onInput = (event) => {
    // input box에 값이 입력될 때 마다 그 값을 
    // input state에 저장
    setInputCost(event.target.value);
  }

  return (
    <div>
      <h1>The Coins! ({coins.length})</h1>
      <input type="text" placeholder="input USD price" value={inputCost} onChange={onInput}></input>

      {loading ? (
        <strong>Loading...</strong>
      ) : (
        <select onChange={onChange}>
        {coins.map((item) => (
          <option 
            key={item.id}
            value={item.quotes.USD.price}
          >
            {item.name} ({item.symbol}) : ${item.quotes.USD.price} USD
          </option>
        ))}
      </select>
      )}

      <hr />
      입력한 달러는 {inputCost/cost} 코인입니다.
      
    </div>
    );
}

export default App;

 

 

[ async를 사용하여 fetch를 통해 api 호출 ]

- async : api 호출 시 응답값을 받을 때까지 대기할 수 있도록 함 (ajax 와 동일) 

import { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [cost, setCost] = useState(1);
  const [inputCost, setInputCost] = useState(1);
  
  // async를 활용하여 api 호출
  const getList = async() => {
  	const response = await fetch("https://api.coinpaprika.com/v1/tickers");
    const json = await response.json();
    setCoins(json);
    setLoading(false);
    // select box에 출력될 1번째 항목의 값을 state에 저장
    setCost(json[0].quotes.USD.price);
  }
  
  // 최초 1회만 감시
  useEffect(() => {
    getList();
  }, []);

 ... 생략 (위 코드와 동일)
export default App;