오늘 공부한것 & 기억할 내용
createGlobalStyled
- reset style을 사용하고 싶을때 사용한다.
const GlobalStyle = createGlobalStyled``as
-router v6부턴 type지정 제네릭 지원 하지 않기에 as로 작성해준다.
//router-dom만 해당
interface RouteParams{}
const { coinId } = useParams() as RouteParams;useLocation
Link사용시 데이터를 넘기고 싶을때 사용- Link크가 클릭될때 데이터가 넘어가기에 url페이지를 바로 열경우 에러가 나타난다.
//Coins.tsx
<Link to={} state={state}></Link>
//Coin.tsx
const {state} = useLocation() as RouteState?
- API를 담은 데이터를 사용할때
?를 쓸 경우가 있는데 호출전 데이터가 빈값일 수 있기에 옵셔널 체이닝을 사용한다.
data.info?useMatch
- 주어진 url과 현재 url이 일치하는지 확인
const priceMatch = useMatch("/:coinId/price")
console.log(priceMatch)reactQuery
- 리액트에서 서버 상태를 관리하는데 도움을 주는 라이브러리
- 데이터를 캐시에 저장해 둔다.
//reactQuery사용하기 전 코드
const [coins,setCoins] = useState<CoinInterface[]>([])
const [loading,setLoading] = useState(true)
useEffect(() => {
(async()=>{
const json = await (await fetch("https://api.coinpaprika.com/v1/coins")).json()
setCoins(json.slice(0,100))
setLoading(!loading)
})()
},[])
//reactQuery사용 후 코드
//useQuery는 두개의 인자가 필요(고유 키, 쿼리 함수)
const { isLoading, data } = useQuery<CoinInterface[]>({
queryKey: ["allCoins"],//고유 키
queryFn: fetchCoins, //함수
select: data => data.slice(0, 100) //옵션
}); 📌useQuery사용시 쿼리 함수 차이
첫번째: Coins.tsx의 fetchCoins 에는 뒤에 ()가 붙지 않습니다.
두번째 : Coin.tsx 의 () => fetchfunction(argument) 는 함수 뒤에 ()가 있고 그안에 인자가 들어가지만 앞에서 () => 를 표현하여 주었으므로 일종의 함수 포장지 입니다.
정리 : useQuery 의 두번째 인자로는 함수가 들어가야 하지 함수의 실행값이 들어가서는 안됩니다. 함수의 뒤에 ()를 붙이는것은 함수를 실행하겠다는 의미이고, ()를 붙이지 않는것은 함수의 실행권한을 이벤트에게 넘기겠다는 말과 같습니다.
ReactQueryDevtools
- 캐시에 어떤 query가 있는지 보여주는 도구
//Root.tsx
<ReactQueryDevtools initialIsOpen={true}/>이슈
component를 import하다가 그냥 이름을 바로 적는것과 {} 괄호 안에 넣어서 적는것이 무슨 차이가 있는지 궁금해서 찾아봤다.
//함수표현식
const name = () => {} //import name
//함수 선언식
export function name(){} //import {name}배운점 & 느낀점
오늘 배운것중 react-query가 제일 인상 깊었다. 여태까지 api를 useState,useEffetc를 사용해 fetch하던 방식보다 코드가 간결하고 너무 간편하다는걸 배웠다.
