아무것도 없는 금요일이라 최소 강의 3개는 조지고, 술을 조지러 가야겠다.라고 생각한 내 마인드가 3시간 동안 조졌다.
어떻게 14분 분량의 강의를 거즘 3시간 소화시킨 거지 아무리 꼭꼭 씹어먹는 게 좋다만, 과하다. 과유불급!
사실 강의 14 분치고 양이 많은 것도 있었는데, 혼자 숙제하느라 시간을 많이 잡아먹었다.
내 수준도 어느 정도 체감했고 값졌다. 이렇게 오랜 시간 집중한 것도 오래간만이고. 아 오늘 든 생각인데,
강의를 다 듣고 코드를 혼자 적어보거나 예외적인 내용들 추가해보는 습관도 들이면 좋을 것 같다.
서론이 역시나 오늘도 길었다 가보자 고!
오늘 만들건 coin Tracker 방대한 이름과는 다르게 암호화폐들 api를 싹 긁어와 이름, 가격, 상징 등 나열하는 것 + 독학 숙제
일단 시작은 로딩 중이라는 문구를 보여주는 것 우리가 흔히 웹페이지에 접속했을 때나, 이동했을 때 보게 되는 문구로
로딩 중.. 다음에 보여줄 것들이 나오면 더 이상 저 문구가 나오지 않는다.
useEffect가 떠올랐는데 강의에서도 useEffect를 쓴다고 해서 기분이 무야호 했다. 밑의 코드를 보자.
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을 추출하려고 함.
클릭하면 다음과 같이 보여준다. 🔽
밑에 코드를 보면, fetch뒤에 then을 쓰고, response를 받아 response.json을 return 받도록 함.
그다음 then 은 json을 받아 console.log로 콘솔 창에 json을 보여주도록 했다.
콘솔창에 결과
data가 보임. 이제 이 data를 컴포넌트를 통해 보여주기만 하면 됨 data를 보여줄 state 만들기
저번 시간에 toDoList를 만들 때 사용한 state에서 array에 저장하는 방법을 통해 setCoins(json)하여서
데이터들을 coins의 state를 변화시키고, 이 과정이 끝나면 setLoading - false를 통해
loading을 더 이상 보여주지 않도록 한다. 현재 coins라는 변수에 코인들의 array가 담겨있음.
line 11에서 setLoading을 통해 loading값을 false로 변경해 아무것도 나타나지 않게 한다.
🔽 실행결과
map을 사용해 array에 담긴 코인들의 데이터를 시각화할 차례.
<저번에 배운 내용> map은 함수를 필요로 하는데 첫 번째 인자로는 value를 가진다. map을 사용할 때, react에서 element에 key를 주도록 했는데 index를 사용한 저번과는 다르게 이번엔 key값을 가져온 코인 데이터의 id를 이용하면 된다. </저번에 배운 내용>
+까먹어서 key값 추가 안 했다가 마지막에 함 ㅎㅎ
이제 map함수를 통해 coins array의 item인 coin을 하나하나 받고 json안에 있는 coin들의 데이터 중 첫 번째로 name을 보여주고, symbol, price li태그 안에 넣어 보여주도록 한다. 이중 가격은 quotes라는 object의 USD임. 코
인을 몇 개보 여주고 있는지 보여주기 위해 line 16dp {coins.length} 추가
조금 더럽지만 완성 로딩 중일 때는 빈 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 설정 집중해서 보면 되겠다.
마지막 결과 gif
이제 금요일 즐기러 가자 출발 깡우동으로 출발 영통으로!
'코딩 > REACT' 카테고리의 다른 글
| ~0530 React Router 6월이다. 22년 절반이 지나가려해 (0) | 2022.06.01 |
|---|---|
| ~0529 React - Movie App pt.(1,2) 굿바이 서울 (0) | 2022.05.29 |
| ~0524 React toDolist pt.2 천천히 오가는 대화 속에 (0) | 2022.05.26 |
| ~0524 React toDolist pt.1 (1) | 2022.05.25 |
| ~0523 cleanUp (0) | 2022.05.23 |
