This message was deleted.
# 질문s
Slackbot
09/11/2021, 6:15 AMThis message was deleted.
t
Tony Won
09/11/2021, 7:25 AM
1. useLazyLoadQuery
a. 클릭 등 유저의 행동 -> state 변경 -> react 리렌더링 -> query 호출 -> 로딩 표현 -> 완료
2. useQueryLoader
a. 클릭 등 유저의 행동 -> query 호출
b. -> state 변경 -> react 리렌더링 -> 로딩 표현 -> 완료
요렇게 더 일찍 요청을 날릴 수 있어요. 그래서 react 리렌더링이 일어나는 10~20ms 정도의 시간을 아낄수 있어요.
👍 3
Tony Won
09/11/2021, 7:26 AM
https://relay.dev/docs/guided-tour/rendering/queries/#fetching-queries-for-render
onSelectHomeTab을 보시면 됩니당
Tony Won
09/11/2021, 7:27 AM
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
거부기뿌기
09/11/2021, 8:00 AM오오오 useLazyLoadQuery는 setState를 해서 리렌더링 이후 바뀐 상태를 통해 쿼리를 요청하게 되어서 약간 간접적으로 쿼리를 쏘는 반면,
useQueryLoader를 쓰면 직접적으로 loadQuery써서 쿼리를 날릴 수 있군요 ㄷㄷ
좋은 설명 감사합니다! 바로 이해되었어요!
t
Tony Won
09/11/2021, 8:25 AM
useQueryLoader + loadQuery를 쓰는게 성능상 이상적이긴한데, 쿼리를 호출하는 곳과 쿼리를 소비하는 곳이 서로 멀리 존재하게 된다면 코드적으로 유지보수하기 힘들게 될거같아요. 그래서 대부분의 경우에는 useLazyLoadQuery를 쓰게되는거같긴해요
예1. 버튼을 눌렀을때, 페이지 이동, 이후에 데이터 로드 (useLazyLoadQuery)
예2. 버튼을 눌렀을때 하위 컴포넌트를 로드 (useQueryLoader)
Tony Won
09/11/2021, 8:26 AM
그치만 react-router v6 에는 preload 기능이 새로 추가되는걸로 알고있어서… 이런 경우에는 페이지 이동시에도 useLazyLoadQuery를 쓸 수 있을것으로 기대하고 있어요 ㅎㅎ
u
거부기뿌기
09/11/2021, 10:09 AM오오오오 저도 useLazyLoadQuery가 더 직관적이고 사용하기 편한거같아서 10ms~20ms는 포기할만한거 같아요 ㅋㅋㅋ
예2에서 버튼 클릭시 하위컴포넌트 로드할 때 useQueryLoader를 선호하시는 이유는 그래도 버튼 클릭이라는 유저 액션에 대해서는 조금이라도 빠르게 렌더링을 해주고 싶으셔서 사용하시는걸로 이해하면 될까요?
h
Hyeseong Kim
10/03/2021, 3:57 PMrender-as-you-fetch 패턴에 대한 맥락은 여기 추천드립니다.
• Concurrent UI Patterns: https://reactjs.org/docs/concurrent-mode-patterns.html
•
Hyeseong Kim
10/03/2021, 4:03 PM영상 보시면 확 올겁니다