https://facebook.com/groups/graphql-kr logo
Join Slack
Powered by
안녕하세요! 공식문서 <Queries 챕터를> 읽다가 궁금한 점이 생겨서 질문하러 왔어요!...
# 질문
u
안녕하세요! 공식문서 Queries 챕터를 읽다가 궁금한 점이 생겨서 질문하러 왔어요! “useLazyLoadQuery”를 사용하는 거랑 “useQueryLoader + usePreloadedQuery”를 사용하는 것의 차이점이 뭔지 궁금해요. useQueryLoader 훅을 호출하는 시점도 결국 컴포넌트가 마운트 되는 시점이고, useLazyLoadQuery를 호출하는 시점도 컴포넌트가 마운트되는 시점인 것 같은데 왜 “useQueryLoader + usePreloadedQuery” 조합이 권장되나용? fragment를 사용하면 useLazyLoadQuery를 사용해서도 데이터가 필요한 컴포넌트에서 프레그먼트를 선언하고 useLazyLoadQuery가 호출되는 시점에 필요한 데이터를 모두 불러올 수 있지 않나용?
t
1. useLazyLoadQuery a. 클릭 등 유저의 행동 -> state 변경 -> react 리렌더링 -> query 호출 -> 로딩 표현 -> 완료 2. useQueryLoader a. 클릭 등 유저의 행동 -> query 호출 b. -> state 변경 -> react 리렌더링 -> 로딩 표현 -> 완료 요렇게 더 일찍 요청을 날릴 수 있어요. 그래서 react 리렌더링이 일어나는 10~20ms 정도의 시간을 아낄수 있어요.
👍 3
Copy code
// Start loading query for HomeTab immediately in the event handler
    // that triggers navigation to that tab, *before* we even start
    // rendering the target tab.
    // Calling this function will update the value of homeTabQueryRef.
u
오오오 useLazyLoadQuery는 setState를 해서 리렌더링 이후 바뀐 상태를 통해 쿼리를 요청하게 되어서 약간 간접적으로 쿼리를 쏘는 반면, useQueryLoader를 쓰면 직접적으로 loadQuery써서 쿼리를 날릴 수 있군요 ㄷㄷ 좋은 설명 감사합니다! 바로 이해되었어요!
t
useQueryLoader + loadQuery를 쓰는게 성능상 이상적이긴한데, 쿼리를 호출하는 곳과 쿼리를 소비하는 곳이 서로 멀리 존재하게 된다면 코드적으로 유지보수하기 힘들게 될거같아요. 그래서 대부분의 경우에는 useLazyLoadQuery를 쓰게되는거같긴해요 예1. 버튼을 눌렀을때, 페이지 이동, 이후에 데이터 로드 (useLazyLoadQuery) 예2. 버튼을 눌렀을때 하위 컴포넌트를 로드 (useQueryLoader)
그치만 react-router v6 에는 preload 기능이 새로 추가되는걸로 알고있어서… 이런 경우에는 페이지 이동시에도 useLazyLoadQuery를 쓸 수 있을것으로 기대하고 있어요 ㅎㅎ
u
오오오오 저도 useLazyLoadQuery가 더 직관적이고 사용하기 편한거같아서 10ms~20ms는 포기할만한거 같아요 ㅋㅋㅋ 예2에서 버튼 클릭시 하위컴포넌트 로드할 때 useQueryLoader를 선호하시는 이유는 그래도 버튼 클릭이라는 유저 액션에 대해서는 조금이라도 빠르게 렌더링을 해주고 싶으셔서 사용하시는걸로 이해하면 될까요?
h
render-as-you-fetch 패턴에 대한 맥락은 여기 추천드립니다. • Concurrent UI Patterns: https://reactjs.org/docs/concurrent-mode-patterns.html •

https://youtu.be/WxPtYJRjLL0▾

영상 보시면 확 올겁니다
Open in Slack
PreviousNext
Powered by