1. Coin Tracker

1-1. 암호화페 API 불러오기

const [loading, setLoading] = useState(true);
const [coins, setCoins] = useState([]);

  useEffect(() => {
    fetch('https://api.coinpaprika.com/v1/tickers')
      .then((res) => res.json())
      .then((result) => {
        setCoins(result);
        setLoading(false);
      });
  }, []);

1. fetch 메서드로 암호화페 API를 불러온다.
2. useState를 이용하여 API 정보를 coins라는 배열 안에 담아준다.
3. useEffect 안에 fetch 메서드 로직을 넣어 화면 첫 렌더링 후에만 정보가 보여지도록 한다.

1-2. Loading

👉 API 정보를 화면에 불러오기까지 시간이 걸린다. 정보를 받아오는 동안 사용자에게 'Loading' 표시를 보여주어 로딩중이라는 사실을 알려준다.

<h1>Coin Tracker {loading ? '' : `${coins.length}`}</h1>

1. useState를 이용하여 loading이라는 변수에 true을 넣어준다. loading 중인지 아닌지 판별하기 위함이다.
2. 삼항연산자를 이용하여 로딩중이면 loading 글씨가 보이게 하고, 아닐 경우에는 빈 텍스트를 보여준다.

1-3. 코인 이름과 가격 보여주기

      {loading ? (
        <strong className='loading'>Loading...</strong>
      ) : (
        <ol>
          {coins.map((coin) => {
            return (
              <li key={coin.id}>
                <strong>{coin.name} : </strong>
                <span>{coin.quotes.USD.price.toFixed(2)} USD</span>
              </li>
            );
          })}
        </ol>
      )}

1. API를 통해 받아온 정보는 coins에 담아두었다.
2. coins에 map 함수를 돌려 코인의 이름과, 가격을 리스트 형태로 보여주도록 한다.
3. 가격은 소수점 2번째 자리까지만 보이도록 toFixed 메서드를 사용한다.
   
   

2. Coin Converter

2-1. 컴포넌트화

👀 어떤 코인을 선택하느냐에 따라 변환 UI가 달라지기 때문에 2 부분으로 나눠서 컴포넌트화 시켜주었다.

1. coinConverter.jsx

• 부모 컴포넌트
• title과 select 태그 부분
• 어떤 코인을 변환할 건지 선택하는 부분
  
  

2. converter.jsx

• 자식 컴포넌트
• 1 USD당 XX코인의 값 또는 1 XX코인당 USD의 값을 변환해주는 부분
• select 태그로 선택한 코인의 정보를 부모 컴포넌트로 부터 props로 받아온다.

2-2. select 부분

<select value={index} onChange={onSelected}>
	<option value='-1'>Select Coin</option>
          {coins.map((coin, index) => {
              return (
                <option key={coin.id} value={index}>
                  {coin.name}
                </option>
              );
		  })}
</select>
          <br />
          {index === '-1' ? (
            <span className='select'>----- Please Select Coin -----</span>
          ) : (
            <Converter coin={selected} />
          )}

1. API 정보를 보여주는 부분은 Coin Tracker와 동일하다.
2. 사용자가 어떤 코인을 선택했는지 알려줄 수 있는 부분은 value값에 index를 넣어주었다.
3. select 안에 있는 coins의 index는 수정/삭제가 불가능하므로 그대로 써도 무방하다.
4. Select Coin 부분은 임의로 index를 '-1'로 주어 중복되지 않도록 설정해주었다.
5. 추가적으로 사용자가 Select Coin 부분을 선택했을 때는 혹은 첫 랜더링 후 초기화면에 ----- Please Select Coin -----가 보이도록 설정해주었다.
   
   

2-3. convert 부분

<div>
        <label htmlFor='usd'>USD : </label>
        <input
          id='usd'
          value={disabled ? usd * coin.quotes.USD.price : usd}
          onChange={onChange}
          type='number'
          disabled={disabled}
        />
      </div>
      <div>
        <label htmlFor={coin.symbol}>{coin.symbol} : </label>
        <input
          className='coinInput'
          id={coin.symbol}
          value={disabled ? usd : usd / coin.quotes.USD.price}
          onChange={onChange}
          type='number'
          disabled={!disabled}
        />
      </div>
      <button onClick={onClick}>Convert</button>

1. 시간 변환기와 같은 로직이다.
2. 부모 컴포넌트로 받아온 props를 활용하여 작성해준다.
3. 변환해주는 값은 삼항연산자로 계산해주어 간단한게 구현하였다.

🎈 마무리하면서

useState 와 useEffect 개념만 알면 쉽게 구현해낼 줄 알았다. 심지어 Converter 부분은 바로 어제 해봤던 부분이라 중복되서 금방할 줄 알았다. 하지만 사용자가 선택한 select 태그를 어떻게 가져와야 할지 고민하느라 대부분의 시간을 보냈다. 결국 구글링을 통해 value값에 index을 넣어주고 배열의 index와 일치하면 보여주도록 하여 성공하였지만 이걸 스스로 생각하지 못해서 아쉽다.