#4.0

useparams : url에서 내가 원하는 정보를 가져온다

#4.1

기본 css 초기화 : Reset CSS

폰트 검색 : Google Fonts

UI 컬러 추천 : Flat UI Color

#4.2

오른 화살표 쓸때 : → 하면 됨

#4.3

함수를 즉석에서 만들고 바로 사용하는 방법

map을 이용한 여러개의 컴포넌트 생성

#4.4

옵셔널 체이닝(Optional Chaining) Link

#4.5

fetch 와 json화를 하나로 캡슐화

#4.6

interface를 쓸 때 인터페이스 명 앞에 I를 붙여주곤 함 나는 좋은것 같다

VSCode 단축키

Command(Ctrl)+D: 같은 문자열 선택 Shift+Alt+i: 선택한 모든 문자열에 가장 우측 끝으로 포커싱 Command(Ctrl)+Shift+오른쪽 화살표: 현재 선택한 문자열을 기준으로 우측 끝까지 문자열 선택

노마드코더 코딩 인생 꿀템 VSC 단축키 5분 정리해드림 Link

#4.7

hook의 최신 성능을 위해서 hook 안에서 사용한 것은 그게 어떤 것이든dependency를 가져야 한다고 함

nested router

#4.8

useRouteMath => 현재 유저가 특정 URL에 있는지 여부를 알려줌

path일땐 :coinId 라고 할 수 있지만 url일때는 없는것 같음

#4.9

API들은 component들에서 멀리 두기

React 애플리케이션에서 서버 state를 fetching, caching, synchronizing, updating할 수 있도록 도와주는 라이브러리 [react-query][https://react-query.tanstack.com/reference/usequery#_top]

React Query는 데이터를 캐시에 유지해둠

#4.10

coin.tsx 내 useQuery에서 인자로 함수 전달해주는법 참고 + 구조분해할당

#4.11

React Query 복습

#4.12

React Query 활용 chart screen 만들기

리액트쿼리는 미쳤다..

#4.12

[APEX CHARTS][https://apexcharts.com]

[React APEX CHARTS][https://apexcharts.com/docs/react-charts]

#4.14

APEX CHART에서 DEMO를 보면서 옵션들을 확인하면 쉬울 것!

#4.15

react-helmet을 이용하여 손쉽게 웹 head를 바꿀수 있다!

useQuery의 3번째 인자를 통해 주기적인 새로고침이 가능하다!

#4.16

Code Challenge!

• Coin 페이지에서 뒤로갈 수 있는 뒤로가기 버튼 만들기

• Price 탭 만들기

• Chart 탭 CandleStick Chart로 바꾸기

• 다크모드 토글 버튼 만들기

#5.0

State Management는 왜 필요한가?

#5.1

Recoil이 없는 번거로운 global state 관리

#5.2

Recoil의 atom을 이용해서 전역에서 state를 관리할 수 있게 되었다!

useRecoilValue 라는 훅을 이용했다.

#5.3

useSetRecoilState()는 인자로 전달된 atom을 수정하는 함수를 반환한다.

React의 setState와 같은 방식

onClick={() =>setterFn(prev => !prev)} 이러면 매번 반대 값으로바꿔줌 작동이 신기하다!

#5.4

Recap