useQuery 사용 시 불러오는 데이터에 대한 궁금증

[SunNacho]

사진과 같이 useEffect를 사용하던 기존 코드를 useQuery로 변경하려 하는데요, StockListItem이 받는 파라미터인 ticker는 console.log를 통해 제대로 10개씩 받아오는것을 확인할 수 있었습니다. 그런데 사진처럼 useQuery를 사용하니 받아오는 데이터가 KRW-BTC로 고정이 되는데, getTicker의 파라미터를 {queries: {markets: ticker.market}} 와 같이 하는것이 아닌가요? 쿼리 키가 문제인가 싶어 제가 임의로 'market'이라고 써봤는데도 잘 안됩니다.

사진은 모든 data 값이 KRW-BTC로 고정된 모습입니다.

[SunNacho]

다른 건 건들지 않은 채로 markets: ticker.market 부분을 'KRW-ETC'라고 하니 해당 코인의 데이터를 잘 가져오는 모습입니다..

[SunNacho]

해결했습니다. 생각해보니 가장 처음 받은 데이터인 krw-btc가 쿼리 키 'Market'에 할당되어버리니 그 이후에 받는 데이터들을 저장할 쿼리 키가 중복되는거군요. 사진과 같이 해결했습니다.

다만 쿼리 키의 형식을 임시로 ticker.market이라 적었는데 더 좋은 방식이 있을까요?

[akh9804]

useQuery 사용 부분을 따로 함수로 빼면 어떨까 싶네요. getTicker 함수를 사용중이니까 함수명은 useTickerQuery 정도면 될 듯 하고, 아래처럼 작성한 다음 컴포넌트에 가져와서 사용하면 될 것 같아요.

const useTickerQuery = (markets) => {
  const {data} = useQuery([markets], {
    queryFn: () => getTicker({queries: {markets}}),
  });

  return data;
}

[SunNacho]

아하 그러면 쿼리명이 ticker.market이랑 동일하지 않을까요? 함수로 따로 빼서 얻게 되는 이득은 무엇인가요?

[akh9804]

맞아요ㅋㅋ 대신 함수로 빼두면 가독성 측면에서 도움이 되고, 추후에 다른 컴포넌트에서 재사용할 수 있어서 좋을 것 같아요

[SunNacho]

아하 좋습니다 좋습니다