[250912] TIL

Today I Learned (2025-09-12)

react-router-dom 에서 lazy로 페이지 컴포넌트 로드하는 이유

• 우선 lazy 를 사용하면 지연 로딩 발생

• 일반 Import 시, 앱이 빌드될때 해당 모듈을 메인 번들에 보함 시킴

  • 사용자가 /trainings /list 페이지에 들어가지 않아도 앱 시작 시점에 무조건 로드됨
  • 이렇게 하면 초기 로딩 속도가 길어져서 사용자 경험이 저하될 수 있다.
• 매칭의 의미

{
  path: "trainings",
  children: [
    {
      path: "list",
      element: <TrainingList />,
    },
  ],
}

사용자가 브라우저 주소창에 입력하면 라우트가 매칭됨 이때 가 실제로 렌더링됨 (promise로 남겨둠) 경로가 매칭되는 순간 네트워크 요청을 보내서 모듈을 불러옴

그럼 현재 URL 을 어떻게 불러오냐?

BrowerRouter

• window.history API 사용 (pushState, popState)
• MemoryRouter 메모리 상의 가짜 history 사용