인프런 커뮤니티 질문&답변
작성한 질문수
react-query enabled 옵션
작성
·
71
0
react-query 사용 시
enabled 옵션이 true인 경우
queryFn을 실행하지는 않지만
queryKey는 생성되는데 queryKey가 안 생기게 하자니 Hook을 조건부로 작성할 수 없어서 이런 방법은 불가능하고 queryFn은 실행하지 않으니 괜찮다는 생각도 드는데
예를 들면 ["post", id]가 있고 id가 null인 경우
queryKey는 ["post", null]로 무조건 생성이 되더군요. Observe도 많은 곳에서 쓸 수록 2 or 3 이런 식으로 증가하고요. 이게 성능에 문제가 없을지 아니면 queryKey 생성까지 막을 수 있는 방법이 있는지 궁금합니다.
답변 2
0
안녕하세요, 인프런 AI 인턴입니다.
ysk님께서 질문하신 사항은 React Query의 enabled 옵션과 queryKey 생성 관련된 내용이네요. 우선, React Query의 enabled 옵션 사용과 queryKey 생성 과정에 대한 간단한 설명을 제공드립니다.
enabled 옵션
enabled: false로 설정하면queryFn은 자동으로 실행되지 않아서 데이터 페칭을 막을 수 있습니다. 그러나 하나의 특성상, queryKey는 여전히 생성됩니다. 이는 React Query의 내부 설계에 따른 동작으로,queryFn과 관계없이 queryKey는 캐싱 시스템의 식별용으로 생성됩니다.
queryKey 생성 문제 및 성능
queryKey자체는 서버로의 요청과 직접적인 연관이 없기에, 단순히 생성되는 것만으로 성능에 큰 문제를 주지는 않습니다. 다만,queryKey의 구성 요소로null이 포함되는 경우, 예상치 않은 데이터를 참조할 가능성 등을 염두에 두어야 합니다.
성능 최적화 팁
- 의미 있는 조건부 사용: 미리 검사 후 조건에 따라
useQuery를 사용하는 방식을 채택하세요. 예를 들어,id가 존재할 때만useQuery를 사용하는 방법입니다.
queryFn의 효율적 구성:queryFn내부를 최대한 경량화하고, 불필요한 작업을 최소화하여 만일의 경우에도 효율성을 지킬 수 있도록 합니다.
- 유연한
queryKey설계: 가능한 경우null같은 비의미적 게시 요소를queryKey에 포함하지 않도록 관리합니다.
유사한 질문 및 답변을 찾기 위한 참고:
- React Query의 enabled 속성에서 유사한 논의를 확인할 수 있습니다.
- 또 다른 참고 자료로는,
useQuery사용 시 조건부 처리에 대한 블로그 포스트가 있습니다. 이 포스트는 React Query의 핵심 개념을 깊이 있게 다루고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useQuery({ queryKey: ["wish", id], queryFn: () => getWish(userId!), enabled: !!id, staleTime: 1000 * 60 * 10, });이런 식으로 했을 때 id가 없을 경우 queryFn은 실행되지 않지만
query devtools에서는 ["wish", null]로 생겨서 문의드렸습니다. 해당 키에 disabled 표시와 data: null인 것을 확인 했지만 키가 캐싱(?)되긴 하는 것 같아서요