aria-required : true로 지정하여 사용자에게 해당 요소가 필수적으로 입력되어야 함을 전달
aria-describedy: 아래와 같이 작성하면 div reference의 내용을 input의 추가 설명으로 사용해준다.
<input type="text" aria-describedby='reference'/>
<div id='reference'>추가 설명</div>
const Detail = ({ idState }: IProps) => {
// ...
// ...
const { data: detailData, isLoading } = useQuery(
[`${idState}detailData`, idState],
() => getCoinDetailTicker(idState),
{
refetchOnWindowFocus: false,
staleTime: 60000,
cacheTime: Infinity,
suspense: true,
useErrorBoundary: true,
}
)
const { data: detailChartData } = useQuery(
[`#chartData${detailData.id}`],
() =>
getCoinDetail({ coinId: detailData.id, start: apiStart, interval: '1h' }).then((res) => {
const result = res.data.map((item: IGraphProps) => ({
timestamp: dayjs(item.timestamp).format('HH'),
price: item.price,
volume_24h: item.volume_24h,
market_cap: item.market_cap,
}))
return result
}),
{
refetchOnWindowFocus: false,
suspense: true,
cacheTime: Infinity,
useErrorBoundary: true,
}
)
// ...
}
export default Detail
❌ 문제 내용 : idState를 통해 첫번째 useQuery부분에서 2번째 useQuery에 매개변수로 필요한 데이터를 패칭해온뒤 두번째 useQuery를 실행시키는 내용 중 두번째 useQuery의 detail.id 가 undefined로 실행되는 오류
💡 해결 방법 : 매개 변수로 useQuery를 실행시키면서 useQuery에 명시해 주지 않았음..
//변경 전
const { data: detailChartData } = useQuery(
[`#chartData${detailData.id}`],
() =>
// ...
// 변경 후
const { data: detailChartData } = useQuery(
[`#chartData${detailData.id}`,detailData.id],
() =>
// ...
정말 기본적인 사용방식인데 이걸 빼먹어서 한시간 가량 헤맸다..
useQuery with if , how to use if with useQuery, how to use useEffect with useQuery…
등등으로 검색하느라 시간 다 날림,,
그 과정에서 새로 안 내용도 있다
useQuery의 세번째 인자의 옵션 중 enabled
을 주면 쿼리가 자동으로 실행되지 않게 설정하는 옵션이다