패널 페이지

[leegwae]

• 중복 로직 함수로 분리
• queryClient에서 꺼내오는 데이터와 로더에서 꺼내오는 데이터 확실히 구분
• 변수 정의 순서 변경
• 추상화 수준 동일하게 변수 선언

로더에서 가져오는 데이터와 쿼리 클라이언트에서 꺼내오는 데이터의 구분

로더에서 가져오는 데이터의 특징

• 비동기적으로 업데이트되지 않는다. 렌더링 간 stable하다.
• 로더가 호출될 때(로더는 라우터에 등록한 페이지 컴포넌트가 렌더링되기 전 호출된다) 변화되는 값이다
• 전역적이다(useLoaderData, useRouteLoaderData)

=> 서버 상태에 민감하게 반응하지 않아도 되는 데이터

쿼리 클라이언트에서 가져오는 데이터의 특징

• 비동기적으로 업데이트된다
• 쿼리가 처음으로 fetch될 때(새로운 쿼리 인스턴스가 마운트되는 경우) 혹은 refetch될 때(쿼리에 refetchInterval을 설정한 경우, 그리고 stale 쿼리에 한하여 새로운 쿼리 인스턴스가 마운트되는 경우, 윈도우가 포커싱되는 경우, 네트워크가 다시 연결되는 경우) 변화되는 값이다
• 전역적이다(useQuery)

=> 서버 상태에 따라 민감하게 반응해야하는 데이터

현재 패널 페이지 렌더링 전 로더에서 패널 정보 API와 활동 정보 API를 쿼리를 사용해 fetching한다. 즉슨 패널 페이지 하위의 컴포넌트는 쿼리를 사용해도 캐시에 무조건 데이터가 있음을 보장할 수 있다. => useLoaderData를 없애자!