안녕하세요 rtk query와 useEffect에 대해서 질문이 있습니다..!!

Question

import app from &#34;../shared/firebase&#34;; import { getDownloadURL, getStorage, ref } from 'firebase/storage'; const DetailProduct &#61; (props) &#61;> { const {id} &#61; useParams(); const [imageLoading, setImageLoading] &#61; useState(true); const [quantity, setQuantity] &#61; useState(1); const [imgUrl, setImgUrl] &#61; useState(&#34;&#34;); const { data, isLoading, isFetching } &#61; useGetDetailProductQuery({id}); if(isLoading || isFetching) return <Spinner/> else if(data){ const storage &#61; getStorage(app); const imageRef &#61; ref(storage, &#96;image/${data[0].images[0].path}&#96;); getDownloadURL(imageRef) .then(url &#61;> { setImgUrl(url); }); } 안녕하세요 웹개발을 시작한지 얼마 되지 않아서 이런거에 대해서 잘 몰라서 오래 찾아보았으나 구글에도 rtk query에 관한 내용이 많지 않아서 무엇이 맞는것인지 모르겠어서 질문 드립니다..제가 이해한 바로는 rtk query는 async await없이 useGetDetailProductQuery()와 함께 isLoading이 false가 되면 data가 가져와지는 형식으로 알고있습니다. 그리고 rtk query나 react query를 사용하지 않는 경우에는 컴포넌트 내에서 비동기처리를 하기 위해서 useEffect를 사용해야 하는 것으로 알고 있습니다.현재 rtk query로 서버에서 상품 정보 중 image 배열을 받아오면 그 이미지 이름을 바탕으로 firebase storage에서 실제 이미지 url을 받아오는 작업을 하려고 하고 있습니다. 그러나 if문에서 early return이 된다는 이유로 첫번째 if문 이후에 useEffect를 쓰는것은 훅 규칙에 위배되고 useEffect없이 비동기처리를 하는것은 옳지 않다고 생각됩니다. 제가 생각한 방안은 imageRef까지만 이 컴포넌트에서 구현하고 ImageComponent를 따로 만들어서 거기에서 useEffect로 이미지를 가져온뒤 이 컴포넌트에서 import하는 방법이나 useLazyQuery를 이용하는 방법이 생각나는데 제가 제대로 배워본적이 없어서 어떻게 하는 것이 맞는 방법인지 모르겠습니다.. 알려주신다면 정말 감사할 것 같습니다!!

kenu,전독시 · Answer

rtk 가 뭐의 약자인가요? real time kill?Redux ToolKit 이군요.isLoading이 false가 되면 data가 가져와지는 형식isLoading이 true인 사이에 data를 가져오면 isLoading이 false 가 되는 게 상식적이지 않나요?

몰랑토끼 · Answer

rtk query보다는 react query나 tanstack query를 쓰기 때문에 자료가 잘 없는거고요.. useEffect는 비동기가 주목적은 아니구요.. 훅은 최상위에서만 써야되고요..

최혁진 · Answer

)

안녕하세요 rtk query와 useEffect에 대해서 질문이 있습니다..!!

3개의 답변

Q&A 목록