리액트 lazy와 Suspense질문있습니다.

Spa를 만들면서 lazy와 suspense로 로딩처리하는것을 너무 남발하는거같단 생각이 들었습니다. 하나의 잘못된 예시로는.. 모든 라우트경로를 lazy로 처리해주고 전체 라우트를 suspense로 감싸고 로딩처리를 해주는경우인거같은데요.. 아래 코드는 실제로 제가 적용한 코드입니다. 이렇게 하니까 새로고침하면 로딩컴포넌트가 잠깐 반짝하고 사라지는데.. 아무래도 반짝하고 사라지면 사용자 경험측면에서 문제가 될거같단 생각이 들었습니다. 최초 페이지 이동시에도 순식간에 로딩이 떳다 사라지긴하지만 이건 그러려니 하고있습니다. 혹시 다른분들은 어떤식으로 사용중이신가요? useTransition라는 선택지가 있기는하지만 이거는 지금 제 상황과는 맞지않다는 생각입니다. (페이지네이션같은곳에 적용하면 좋을거같단 생각중..) lazy처리해주기에는 라우터 페이지 수가 적으니 걷어내는것도 정답이긴 하겠지만 lazy를 한번 꼭 적용시키고싶습니다. 아니면 메인페이지인 Homepage만 lazy를 걷어낼까요?

1import React, { Suspense, lazy } from 'react';
2import { Route, Routes } from 'react-router-dom';
3
4import Loading from './common/loading';
5
6const HomePage = lazy(() => import('../pages/home/home'));
7const ProfilePage = lazy(() => import('../pages/profile/profile'));
8const ProjectPage = lazy(() => import('../pages/project/project'));
9const ProjectsPage = lazy(() => import('../pages/projects/projects'));
10const IntroDetailPage = lazy(
11  () => import('../pages/intro-detail/intro-detail')
12);
13
14const Router = () => {
15  return (
16    <Suspense fallback={<Loading />}>
17      <Routes>
18        <Route path='/' element={<HomePage />} />
19        <Route path='/intro' element={<IntroDetailPage />} />
20        <Route path='/profile' element={<ProfilePage />} />
21        <Route path='/projects' element={<ProjectsPage />} />
22        <Route path='/project' element={<ProjectPage />} />
23      </Routes>
24    </Suspense>
25  );
26};
27
28export default Router;

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 0

보충이 필요해요 0

개발새발 없다고 비전공 님의 질문