[Refactor] Board 의 불필요한 재렌더링 줄이기 및 롱폴링 종료 조건 수정

[PMtHk]

관련 이슈 번호

close #220

작업 내용

• Board.tsx (칸반보드 상위) 의 리렌더 원인을 찾아서 수정했습니다.
• useSuspenseQuery 와 Suspense, 그리고 prefetchQuery 방식을 좀 이해하고 알맞게 사용해보았습니다.
• 기본적으로 staleTime 을 설정하고, 이 페이지를 벗어날 때, 쿼리 무효화를 진행하는 방식으로 수정했습니다.

추가로, 리팩토링간 쿼리 무효화를 onLeave 에 설정해두어서 디테일 페이지 동작이 반영되지 않아서,
그 부분을 수정했습니다.

고민과 학습내용

prefetchQuery 를 사용하는 이유

[PMtHk]

항상 필요한 로직이라 분리해두었습니다.

[PMtHk]

외부에 있던 스타일을 위한 div 를 KanbanBoard 내부로 가져오기만 했습니다.

[PMtHk]

기본적으로 한번 조회한 후, 상태기반으로 관리되기 때문에 staleTime 을 5분으로 설정하고, 내부에서 5분 주기로 refetch하도록 설정했습니다.

그리고 아래의 onLeave 가 실행되면 무효화를 진행해
다음 페이지 접근 시 새로운 보드 정보를 가져오게 했습니다.

[iam454]

❓
근데 요기선 ensureQueryData 대신 prefetchQuery로 하신 이유가 있나용??

[PMtHk]

ensureQueryData 는 동기적, prefetchQuery 는 비동기적으로 동작하는 것을 알게 되었는데
suspense 와 함께 사용하는 입장에서는 prefetchQuery 가 더 자연스러운 것이 아닐까? 하고 두었습니다.

실제로 loader 에서 데이터를 반환하지 않고, Board.tsx 의 useSuspenseQuery 에서 데이터를 참조하기 때문에
Promise 를 반환하는 prefetchQuery 도 문제가 없을 것이라 생각합니다.

[PMtHk]

근데 생각해보니,

  loader: ({ context: { queryClient }, params: { project } }) => {
    const projectId = Number(project);

    queryClient.prefetchQuery({
      queryKey: ['tasks', projectId],
      queryFn: () => boardAPI.getTasks(projectId),
      staleTime: 5 * 60 * 1000, // 5분
    });

    return { projectId };
  },

으로 사용하는 것이 더 좋겠네요