[FE] 이벤트 페이지 api 호출 개선

[jinhokim98]

issue

• close [FE] 이벤트 페이지 api 호출 개선 #683

구현 근거

아래 영상을 보면 행사 이름 레이아웃이 먼저 보이고 행사 이름이 채워진 후 아래 step 들이 보이게 됩니다.
사용자에게 깜빡거리는 안 좋은 경험을 주게 됩니다.

2024-09-28.12-53-31.mp4

이런 현상을 해결하기 위해선 컴포넌트를 랜더링 하기 전에 필요한 데이터를 전부 불러온 뒤에 컴포넌트를 랜더링하면 되지 않을까 해서 적용해봤습니다.

고민점

1. react-router loader 도입에 대한 고민
   처음에는 react-router의 loader 기능을 활용해서 컴포넌트가 랜더링 되기 전 데이터를 load 한 뒤 랜더링을 하려고 했습니다.
   우리는 서버 상태를 react-query로 관리하며 react-query와 loader를 같이 사용하기 위해선 router에서 query client가 필요해집니다. 하지만 router는 jsx element를 반환하는 컴포넌트가 아니기때문에 hook을 사용할 수 없습니다.

즉 useQueryClient를 사용해서 queryClient를 받아올 수 없기 때문에 지금 작성된 구조로는 loader를 도입하는데 어려움이 있다고 생각했어요

2. 컴포넌트를 감싸는 Loader
   그렇다면 react-router의 loder와 비슷하게 구현해보면 되지 않을까 해서 컴포넌트를 감싸는 로더를 만들어봤어요

<EventLoader>
  <EventPageLayout />
</EventLoader>

위 구조와 같이 Loader를 만들어줍니다.
그리고 Loader 안에서 react-query를 사용해서 api 호출을 해줍니다.
이 때 이벤트에 필요한 세 가지 정보, (Event, Report, Step)를 useQueries를 이용해 병렬적으로 불러오도록 변경했습니다.
병렬적으로 불렀을 때의 장점은 한 페이지에 필요한 정보를 한 번에 실행시키기 위함입니다.

 const queries = useQueries({
    queries: [
      {queryKey: [QUERY_KEYS.event], queryFn: () => requestGetEvent({eventId, ...props})},
      {
        queryKey: [QUERY_KEYS.reports],
        queryFn: () => requestGetReports({eventId, ...props}),
      },
      {
        queryKey: [QUERY_KEYS.steps],
        queryFn: () => requestGetSteps({eventId, ...props}),
      },
    ],
  });

const isLoading = queries.some(query => query.isLoading === true);
return !isLoading && children;

그리고 로딩이 아닐 경우에 children을 랜더링하도록 설정해서 데이터가 로딩 중일 때는 컴포넌트가 랜더링되지 않고 로딩이 끝난 후 데이터가 준비가 됐을 때 children이 보이도록 했습니다.

개선 결과

2024-09-28.12-53-43.mp4

더 개선해야 할 점

로더를 통해 데이터를 미리 가져오지만 staleTime이 설정되지 않아 데이터를 불러오자마자 stale 처리되어 하위에서 다시 데이터가 fetch 됩니다. 이 부분은 조금 아쉬워요

🫡 참고사항

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-namiwjnwzg.chromatic.com/

[pakxe]

오 useQueries는 처음봅니다. 여러개의 쿼리 콜백을 넘겨주고 한번에 실행하는 훅인가봐요. 새로이 알게되었습니다 👍

[jinhokim98]

맞아요! 세 개의 쿼리를 병렬적으로 한 번에 불러올 수 있는 훅입니다!

[soi-ha]

리액트 쿼리 장인 쿠키..

[Todari]

굉장히 좋은 방식이고 접근이지만, 결국 쿼리를 불러오는 역할이 2개씩이 된 것 같아 보이긴 하네요...
그래도 기본적으로 request~를 동일하게 사용하다보니 유지보수가 크게 어려울 것 같다는 생각이 들지 않긴 합니다~!

[Todari]

뭔가 EventLoader보다도 Suspense 역할인 것 같아서 이런 이름을 녹여내도 좋을 것 같아요!

[pakxe]

이건 queries.length - 1로는 기능하지 않나요?.?

개인적으로 조금 궁금한 점이 있는데요. 왜 하필 2번째의 쿼리가 모두 완료되어야 하는건가요? useQueries가 동적병렬쿼리를 위한 훅이라고 검색해보니 나오는데.. 병렬이라면 2번째 쿼리가 완료되어도 그 외 쿼리가 완료되지 않았을 가능성은 없나요? 순서는 보장되는 것일까요?!🥹 혹시 쿠키도 이 훅에 대해 잘 모른다면 넘겨도 좋아요. 👍

[jinhokim98]

queries.length - 1 이것도 가능하지만 2번째 있는 데이터가 steps이고 steps를 이용해서 totalAmount를 계산하므로 명시적으로 2를 사용했어요!

왜 하필 2번째의 쿼리가 모두 완료되어야 하는 건가요?에 대한 답은
저 useEffect 문은 아래 로딩과는 관계없이 updateTotalAmount를 계산해주기 위함이었어요.
2번째 데이터가 준비됐을 때 총 금액을 계산해라!는 의미였어요

그런데 여기에서도 한 번 더 계산하고 있어서 두 번 계산하지 않도록 지우는 것이 더 좋을 것 같아요!

const AdminPage = () => {
  const {steps} = useRequestGetSteps();
}

[pakxe]

문제를 해결하기 위해 여러 방법들을 두고 어떤게 적절할지 실행해보며 고민하는 모습이 참 좋습니다 😆 그런 모습을 보며 저도 의욕을 전해받는 것 같아요.

비포 애프터가 영상으로 첨부되어 있어서 어떤 문제를 해결했는지 빠르게 파악할 수 있었어요. 제일 좋은건 결국 문제를 해결해냈다는 것! 👍👍👍

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-mvxurdwcof.chromatic.com/

[jinhokim98]

문제를 해결하긴 했지만 한 편으로 다른 고민도 있어요.
데이터가 다 준비가 된 뒤 랜더링하는만큼 사용자가 흰 화면을 오래 보게 되는 것도 있어요.

화면이 끊겨 보이는 것 vs 사용자가 흰 화면을 오래 보는 것

두 가지를 보면서 어떤 경험이 더 좋지 않은지 이야기해봐요.
이렇게 이야기하는 이유는 LCP가 아주 처참하기 때문입니다..ㅜㅜㅜㅜㅜ

[soi-ha]

유저를 위해 개선해줘서 고마워요 쿠키!
확실히 저번에도 말했지만 한번에 로딩되긴 전 흰 화면이 뜨는 데, 이걸 어떻게 하는 것이 좋을지 고민이네요..
로딩 화면을 띄울 것인가.. 아님 다른 방법이 있을런지...

제가 생각하기에는 로딩 화면을 띄우는게 현재 상황에서는 가장 좋은 방법이라고 생각해요~

[soi-ha]

리액트 쿼리 장인 쿠키..

[Todari]

갓갓쿠... 슬슬 우리도 최적화나 성능 개선을 힘써야 할 때가 되었네요!! 고마워용

[Todari]

굉장히 좋은 방식이고 접근이지만, 결국 쿼리를 불러오는 역할이 2개씩이 된 것 같아 보이긴 하네요...
그래도 기본적으로 request~를 동일하게 사용하다보니 유지보수가 크게 어려울 것 같다는 생각이 들지 않긴 합니다~!

[Todari]

뭔가 EventLoader보다도 Suspense 역할인 것 같아서 이런 이름을 녹여내도 좋을 것 같아요!