~ 0527 React coin-Tracker +뿌듯한 금요일

비긴어게인 오늘 공부량 많다 긴장해라 푸하하

아무것도 없는 금요일이라 최소 강의 3개는 조지고, 술을 조지러 가야겠다.라고 생각한 내 마인드가 3시간 동안 조졌다.

어떻게 14분 분량의 강의를 거즘 3시간 소화시킨 거지 아무리 꼭꼭 씹어먹는 게 좋다만, 과하다. 과유불급!

사실 강의 14 분치고 양이 많은 것도 있었는데, 혼자 숙제하느라 시간을 많이 잡아먹었다.

내 수준도 어느 정도 체감했고 값졌다. 이렇게 오랜 시간 집중한 것도 오래간만이고. 아 오늘 든 생각인데,

강의를 다 듣고 코드를 혼자 적어보거나 예외적인 내용들 추가해보는 습관도 들이면 좋을 것 같다.

서론이 역시나 오늘도 길었다 가보자 고!

 

오늘 만들건 coin Tracker 방대한 이름과는 다르게 암호화폐들 api를 싹 긁어와 이름, 가격, 상징 등 나열하는 것 + 독학 숙제

일단 시작은 로딩 중이라는 문구를 보여주는 것 우리가 흔히 웹페이지에 접속했을 때나, 이동했을 때 보게 되는 문구로

로딩 중.. 다음에 보여줄 것들이 나오면 더 이상 저 문구가 나오지 않는다.

useEffect가 떠올랐는데 강의에서도 useEffect를 쓴다고 해서 기분이 무야호 했다.  밑의 코드를 보자.

 

state없는 리액트는 상상할 수 업써

boolean true를 초기값을 갖는 loading과 수정하는 함수인 setLoading을 만들었다. line8 loading 값이 true일 때

즉 처음에 Loading이라는 문구를 보여주고 그렇지 않으면, 아무것도 보여주지 않는 간단한 코드이다.

 

간단한 결과물

이제 로딩 중이라는 저 문구가 의미 있게 해주자. 내가 보여주려는 암호화폐 데이터가 나오면 저 Loading문구는 없애고,

암호화폐 데이터가 나오도록 한다. -> useEffect 사용

 

오늘의 핵심인 암호화폐 api를 가져오자. fetch+url을 통해 정보를 받아온다. 예전에 바닐라 js에서 날씨 api 사용할 때 해봄

아 근데 중요한 게 line 6에서 마지막에 tickers 뒤에? limit200을 적어야 한다. 안 적으면 너무 많은 데이터 가져와서 오류 나더라.

[]가 비었다는 의미는? -> 한번만 실행하겠다

생소하지만 콘솔 창의 네트워크로 가보자. 여기서 fetch를 통해 무엇을 가져왔는지 볼 수 있다.

tickers를 요청해서 limit를 200개로 설정했으니 200개를 가져왔다.200개의 화폐들의 데이터만 가져오도록 response를 받음 이제, response로부터 json을 추출하려고 함. 

 

200개 암호화폐 진짜 많구나 그만큼 행복하고 불행한 사람도 많겠지

클릭하면 다음과 같이 보여준다. 🔽

 

여러가지 화폐들 별로 id, name, symbol, rank등 key와 value를 갖고있다.

 

밑에 코드를 보면, fetch뒤에 then을 쓰고, response를 받아 response.json을 return 받도록 함.
그다음 then 은 json을 받아 console.log로 콘솔 창에 json을 보여주도록 했다.

 

then 몰라서 가져옴 밑의 코드 바로 보면 된다.

 

console.log로 json을 보자.

콘솔창에 결과

자 약 4개의 사진동안 같은 일을 하는 것 같지만, 결국 4장동안 가져온 데이터를 우리가 활용할 수 있도록 가져왔다 생각하면 될 것 같다.

data가 보임. 이제 이 data를 컴포넌트를 통해 보여주기만 하면 됨 data를 보여줄 state 만들기

state인데 이제 여러값을 array에 넣을거니까 저번처럼 useState안에 [ ]넣기

저번 시간에 toDoList를 만들 때 사용한 state에서 array에 저장하는 방법을 통해 setCoins(json)하여서 

데이터들을 coins의 state를 변화시키고, 이 과정이 끝나면  setLoading - false를 통해

loading을 더 이상 보여주지 않도록 한다. 현재 coins라는 변수에 코인들의 array가 담겨있음.

line 11에서 setLoading을 통해 loading값을 false로 변경해 아무것도 나타나지 않게 한다.

 

🔽 실행결과

 

처음에 입장하면 잠깐 loading이 되고 화폐데이터를 가져와서 state에 채우는순간 사라진다.

 

map을 사용해 array에 담긴 코인들의 데이터를 시각화할 차례.

<저번에 배운 내용> map은 함수를 필요로 하는데 첫 번째 인자로는 value를 가진다.  map을 사용할 때, react에서 element에 key를 주도록 했는데 index를 사용한 저번과는 다르게 이번엔 key값을 가져온 코인 데이터의 id를 이용하면 된다. </저번에 배운 내용>

+까먹어서 key값 추가 안 했다가 마지막에 함 ㅎㅎ

우리는 id, name, symbol정도를 사용할 거야

이제 map함수를 통해 coins array의 item인 coin을 하나하나 받고  json안에 있는 coin들의 데이터 중 첫 번째로 name을 보여주고, symbol, price li태그 안에 넣어 보여주도록 한다. 이중 가격은 quotes라는 object의 USD임. 코

인을 몇 개보 여주고 있는지 보여주기 위해 line 16dp {coins.length} 추가

다coin.~로 표현했지만 price만 qouotes.USD를 통해 접근

 

으 지저분해

조금 더럽지만 완성 로딩 중일 때는 빈 array를 coins에 전달해주기에 line16의 coins.length가 0이 뜨다가 

로딩 완료 되면 200개의 코인 데이터를 가져와서 200이 된 모습

 

다듬어주자. 이쁘고 간결하게

 

먼저 line16에 loading일 때는 개수를 안 보이게 하고 loading이 false값을 가지면 ( loading이 끝나면) 개수를 나타내도록 하자.

굳이 로딩 전에 (0)하는 건 의미가 없고 안 이쁨

 

그다음 이와 비슷한 느낌으로 line17에서 loading이 false 즉, loading이 끝나면 null이 아니라 coin 목록들(li)를 보여주도록 null대신 코드 전체를 넣었다.

 

가장 중요한 ul, li를 쓸 경우 200개가 화면 전체에 나타나 보기 불편하고 지저분하다. 내가 보고 싶은 화폐만 보고 싶을 텐데

그래서 select와 option태그로 두 개를 대체했다. 훨씬 깔끔해진 결과를 보자

 

코드는 이렇구요

와! 깔끔하고 이쁘다!

여기부터는 개인과제인데 input을 통해 내 보유자산을 적으면 그거에 맞게 내가 각 화폐들을 몇 개 살 수 있는지 보여주도록 하는 것이었다.

 

시작은 쉬웠다. state를 만들어 내가 가진 돈과 그 돈의 값을 input에 적는 대로 바꿔줄 함수를 만들고

input에 필요한 기본 설정 value설정 onChange를 했다. 지금까지 많이 해서 간단하게 해결했다.

 

1. 여러 부분에서 시간이 많이 할애되었지만, select에서 value값을 가져오는데 좀 애를 먹었다.

2. select에서 value 들고 와 내가 가진 돈/암호화폐 가격 해서 몇 개 살 수 있는지 보여줄라 했다.

3. 그냥 select창 자체를 추가해서 select에서의  옵션 안에 값들 자체를 변경시키는 방법을 택했다.

4. 신나서 정수, 실수 살 수 있는 화폐수 표현하는 select태그 두 개로 쪼갰다.

 

가까울수록 돌아가다 다시 잘 간 것 같다. 더 좋은 방법이 있겠지만 일단 여기서 만족.

 

코드표를 보자

 

분할해서 두개 붙이니까 너무 안보여서 따로했다

위 사진 state 만든 거랑 input 설정 집중해서 보면 되겠다.

select 그리고 그 안의 option에서 변경 된 것 보면 되겠다.

마지막 결과 gif

흑흑 오래 걸렸어

이제 금요일 즐기러 가자 출발 깡우동으로 출발 영통으로!