노마드 코더 Coin Tracker 챌린지 문제

노마드 코더 Coin Tracker 챌린지 문제

- 가지고 있는 달러를 내가 원하는 코인으로 변환 했을 때 얼마나 되는지 계산하는 문제

 

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

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [dollars, setDallars] = useState("");
  const [result, setResult] = useState("");

  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())    //resp을 json 형태로 바꾸기
      .then((json) => {
        setCoins(json);
        setLoading(false);
      })         //상태에 넣기
  }, []); //빈 배열이면 이 코드는 한번만 작동

  const onChange = (event) => setDallars(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    setResult(dollars*event.target[1].value);     //JSX안에서 자바스크립트 state 값 쓸 때만 중괄호 사용한다.
  };

  return (
    <div>
      <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
      {loading ? <strong>Loading...</strong> :
        <div>
          <h2>코인 변환기</h2>
          <form onSubmit={onSubmit}>
            <input onChange={onChange} value={dollars} type="text" placeholder='가지고 있는 달러 입력'></input>  →  
            <select>
            {coins.map(coin => 
              <option key={coin.id} value={coin.quotes.USD.price}>
                ({coin.symbol}) : {coin.quotes.USD.price} USD
              </option>
            )}
            </select> 
            <button>변환</button>
            <h3>{result}</h3>

          </form>
        </div>
      }

      <hr/>
      <ul>
        {coins.map(coin => <li key={coin.id}> ({coin.symbol}) : {coin.quotes.USD.price} USD </li>)}
      </ul>
    </div>
  );
}

export default App;

[정리]

- useEffect : React에서 컴포넌트가 렌더링 될 때 특정 작업을 할 수 있게 한다. deps가 빈 배열이면 컴포넌트가 처음 마운트될때만 실행

- JSX안에서 자바스크립트 state값 쓸 때 중괄호{} 사용 ,   JSX안이 아닌 함수 영역내에서는 그냥 state 바로 호출하면 됨

- fetch : 비동기통신

- then : fectch를 통해 가지고온 resp를 조작

- {loading ? "" : `(${coins.length})`}  :  삼항연산자와 템플릿문자열

 

https://bumcrush.tistory.com/193

[JavaScript] 자바스크립트 if ...else 문을 3항 연산자로 바꾸기

 

https://bumcrush.tistory.com/192

[JavaScript] 자바스크립트 템플릿 문자열이란?