react 조건부 렌더링 질문드립니다.

Question

react query를 이용해서 쿼리를 만들어 사용하고 있습니다. templates이라는 배열이 비어있다면 No templates, please create your template을 출력하고 값이 있다면 리스트를 쭉 출력을 하고 싶습니다. 해당 코드는 아래와 같습니다 return ( <> {templates.map((item, idx) => ( handleListItemClick(event, item.id)} > ))} {templates.length === 0 ? (

No Templates. please create your template!

) : null} ); templates 값은 react query를 이용해서 아래와 같이 작성했습니다. useTemplate()을 호출하면 const templates 에 값이 할당됩니다. async function getTemplates() { const data = await request({ url: API_BASE_URL + "/template", method: "GET", }); return data.items; } export function useTemplate() { const fallback = []; const { data = fallback, isFetching } = useQuery( queryKeys.templates, getTemplates ); return data; } templates에는 값이 1개 존재하지만 처음 해당 페이지에 접근시 No tmeplate. please create your template이 빠르게 보였다가 1개의 원소를 보여줍니다. 이후에 다시 해당 페이지를 접근하면 query cache가 존재해서 No template. please create your template 이 보이지 않고 정상적으로 보여줍니다. 이 문제를 해결하기 위해 useQuery에서 isFetching 을 가져와서 위에 보여드린 첫번째 코드블록 return 윗줄에 if(isFetching) return

와 같은 식으로 해결해보려 했지만 역시 마찬가지였습니다. 어떻게 해야 query cache가 없는 상황에서 No Template. 문구를 안보이게 할 수 있을까요?

푸르게 · Answer

useEffect useLayoutEffect를 검색해 보세요.

devbelly · Answer

감사합니다

react 조건부 렌더링 질문드립니다.

2개의 답변

#reactquery 목록