노마드코더 React 버전 업그레이드v6 주의 사항

Link 에 다양한 정보 전달하기

react-router-dom 6.0.0버전 이상 사용하시는 분들
Link의 to 프롭에 모든 정보를 담지 않고

처럼 사용하도록 바뀌었습니다.

react-router-dom v6 부터 제네릭을 지원하지 않음.

useParams()

react-router-dom v6 이상이신 분들은
const { coinId } = useParams(); 이렇게만 해주셔도 됩니다.
useParams쓰는 순간 타입이 string or undefined로 됩니다.

+) 인터페이스 활용

interface RouterState {
name: string;
}
const location = useLocation();
const name = location.state as RouterState;

React Query, React Router 설치

npm i react-router-dom@5.3.0 react-query
npm i --save-dev @types/react-router-dom
(2022.02기준 React Router 6버전으로 진행시 @types/react-router-dom를 설치하지 않아도 타입을 불러옵니다.)

라우트

< Route path="/" element={< Coins / >} />

React Router 5 -> 6에서 바뀐 점

• Switch컴포넌트 -> Routes컴포넌트로 변경
• exact삭제
• useHistory -> useNavigate ★★★★★★
• useRoutes 등

coinTracker 필요 API

CoinPaprika
https://api.coinpaprika.com/#tag/Tickers

React Query
https://react-query.tanstack.com

새 프로젝트 셋업

npx create-react-app@5.0.0 react-masterclass-course --template typescript

VS코드 단축키 !!

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

★ ★ ★ ★ ★