styled components , isActiveProp, useRouteMatch를 사용하여 Switch 만들기.
- useRouteMatch import 하기
import { ..., useRouteMatch } from 'react-route-dom';
2.변수에 useRouteMatch할당하기. 할당할 때 어떤 Route를 사용할 것인지 입력
const moreMatch = useRouteMatch("/:userId/more");
const detailMatch = useRouteMatch("/:userId/detail");
설정하면, 해당 Route에 들어오면 object 반환, 아닐 시 null 반환
- switch할 styled components에 isActive를 boolean값으로 주기
const Tab = styled(something)<{isActive:boolean}>``;
4.boolean값을 통해 변화 줄 styled 입력하기
const Tab = styled(something)<{isActive:boolean}>color: ${(props) => props.isActive && salmon};;
- JSX 내 switch를 적용할 스타일 컴포넌트에 isActive props 주기
<Tab isActive={moreMatch !== null}>
<Tab isActive={detailMatch !== null}>
react query
1.npm install @types/react query
2.index.tsx import
import {QueryClient, QueryClientProvider, useQuery } from 'react-query';
3.wrap App component in render
react query는우리가 스스로 실행하고 있었던 로직들을 축약해준다.
react query를 사용하기 위해서는 첫 단계로 fetcher function을 만들어야한다.
fetcher function은 API 요청,실행만을 수행하는 스크립트를 따로 만들어
기존 컴포넌트와 분리하여 만들 수 있다.
fetcher funcion은 기본적으로 fetch를 하는 함수이기 때문에
꼭 fetch promise를 return 해주어야 한다.
1.스크립트 만들기. ex ) api.ts
2.함수 작성(앞에 export를 붙여 생성)
export function fetchCoins() {
return fetch('https://api.coinpaprika.com/v1/tickers').then((response) =>
response.json()
);
}
3.사용할 컴포넌트에 useQuery 작성
useQuery는 2가지 인자를 받는다.
첫번째로 querykey로 query의 고유식별자이고
두번째로는 작성한 fetcher function의 이름이다.
- useQuery가 리턴하는 것을 받기 위해 변수에 비구조화 할당한다
const { isLoading, data } = useQuery("key",fetcherfunctionname)
isLoading
isLoading은 boolean값을 return 한다.
isLoading를 사용하면 기존에 작성한 코드의
const [loading,setLoading] = useState(true);와
setLoading(false)를 대체할 수 있다.
isLoading은 불러온 fetcher function이 작업중일 때와 종료중일 때를 말해준다
1줄 정리 : isLoading을 사용하면 사용자에게 로딩중이라는것과 fetcher함수가 끝날 때를 말해준다.
data
fetcher function이 종료 되면, 리턴값을 data 변수에 넣어준다.
타입스크립트에게 알려줄 수 있게 <CoinInterface[]>를 삽입한다
interface CoinInterface {
id: string;
name: string;
symbol: string;
rank: number;
is_new: boolean;
is_active: boolean;
type: string;
}
react query는 데이터를 받아온 뒤 캐시에 저장해두기 때문에(캐싱)
이후 api를 통해 다시 데이터를 받지 않아 로딩이 사라진다.
2개의 useQuery를 사용해야 한다면 각각의 프로퍼티 값을 배열로서 넣어주어야 한다.
const {isLoading: InfoLoading, data: infoData} = useQuery(["info",coinId],() =>fetchCoinInfo(coinId))
const {isLoading: TickersLoading, data: tickersData} = useQuery(["tickers",coinId],() => fetchCoinTickers(coinId))
object의 property를 가져온 다음 syntax를 이용해서 이름을 바꾼다.
2개의 query에 고유한 id를 주고 fetcher function으로부터
return property를 받아오고 이름을 바꿈.
{error: 'invalid parameters'}
400(잘못된 요청) 상태 코드는 클라이언트 오류(예: 잘못된 요청 구문, 잘못된 요청 메시지 프레이밍 또는 사기성 요청 라우팅)로 인식되는 것으로 인해 서버가 요청을 처리할 수 없거나 처리하지 않을 것임을 나타냅니다.
파라미터의 타입문제. 필수로 요청해야하는 포멧이 있는지 api사이트에서 확인한다.
지정한 자료형이 알맞는지 확인한다.
