COIN TRACKER

이번엔 코인들의 정보를가져와서 보여주고 달러를 기준으로 얼만큼 살 수 있는지 확인할 수 있는 기능을 만들어 보려고한다.

이걸 만들기 위해 먼저 4가지 state를 만들었다.

내가 얼마나 살 수 있는지 확인할 수 있는 money state, 그리고 현재 검색한 coin state, coin data를 가지고 올 동안의 loading state, coin list를 담고있는 coins state

https://api.coinpaprika.com/v1/tickers

위의 url을 사용하여 coin list를 불러오는 걸 useEffect안에 넣어주어서 한번만 실행이되도록 해주었다.

async await을 사용하지 않으면 then을 사용하여 해주어야하는 번거로움이 있어서 async await을 사용해주었다.

 

그리고 5700개의 코인정보가 json에 담겨오는데 이걸 다 사용하기에는 무리가 있어서 1위부터 20위까지의 코인들까지만 자른 후 coins에 정보를 넣고 coin에는 배열의 첫번째를 넣어주었다. 그리고 정보를 가져왔음으로 이제 loading은 false로 해주었다. 

 

onChange라는 함수는 select에서 선택이 되면 실행이 되는 함수인데

filter를 이용하여 현재 선택된 코인의 이름과 일치하는 코인의 정보를 coins에서 빼내서 setCoin를 해주는 기능이다.

onChan이라는 함수는 input창에 돈(USD)을 입력할때마다 실행되는 함수인데 그 값을 setMoney해주는 기능이다.

loading이 true이면 Loading...을 출력하고 그게 아니라면 selcet와 input을 출력하도록 하였다. map을 사용하여 coins에 있는 코인의 정보들을 전부 option으로 만들어 return해주었다. react에서 map함수를 쓸 때는 key값을 지정해주어야하여 index를활용해 집어넣어주었다. 화면은 아래와 같다. 

마찬가지로 현재 coin state에 값이 있으면 div를 출력하고 아니면 null을 출력하는 것인데 삼항연산자로 해주어서 처음에 coin에 정보가 없을 때는 null이 표시되도록 해주었다. 여기서 최근 업데이트 시간, 15분 등락률 그리고 달러로 현재 시세를 적어주었다. 위에 내가 input에 금액을 적었다면 몇개를 살 수 있는지 보여주는 h2또한 만들어주었다.