0607 TIL

김형석·2022년 6월 15일
0

wanted-POB

목록 보기
26/26

💡새로 배운 내용

aria-

💡 요소가 기본적으로 가진 특징 or 상황
  1. aria-required : true로 지정하여 사용자에게 해당 요소가 필수적으로 입력되어야 함을 전달

  2. aria-describedy: 아래와 같이 작성하면 div reference의 내용을 input의 추가 설명으로 사용해준다.

    <input type="text" aria-describedby='reference'/>
    <div id='reference'>추가 설명</div>
  • 이제 Link to에서의 props 전달 불가능..!
  • hooks 또는 별도의 저장소를 이용해야함..

문제 해결

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 을 주면 쿼리가 자동으로 실행되지 않게 설정하는 옵션이다

profile
코드로 소통하기 위해 힘쓰는 프론트엔드 개발자 입니다.

0개의 댓글