[React.js + Firebase] React Suspense 적용 - 초간단 사진 게시판 만들기(2)

이 포스트에서는 react-router-dom을 활용해서 firebase에 저장되어 있는 데이터들을 동적 라우팅을 활용하여 클라이언트에 띄우는 과정을 다루고자 한다. 그 전에, 먼저 Suspense와 React lazy를 적용해서 사용자 경험이 빨라지도록 한다. 

먼저 react-router-dom 패키지를 다운로드 받아준다.

npm install react-router-dom

react-router-dom은 v6 버전으로 바뀌면서 굉장히 사용하기 편리 해 졌는데 그중에서도 특히 동적 라우팅 부분에서 편리 해 졌다. 

 

그 다음, src 폴더 하위에 Router.js를 생성한다.

Router.js

💡메서드 설명
BrowserRouter: 브라우저의 history 스택에 접근하며 현재 URL에 따라서 어떤 컴포넌트를 불러와서 페이지를 표시할지 결정하고 렌더링 할 수 있는 컴포넌트이다.
Routes: 특정 컴포넌트를 업데이트 할 수 있도록 한번에 모든 페이지가 렌더링 되는 것을 막아준다. Route들의 묶음.
Route: 경로에 따라서 어떤 컴포넌트를 불러올지 결정한다.
Suspense: 로딩되지 않은 컴포넌트가 로딩되기까지 다른 페이지를 보여주는 역할을 한다. React.lazy가 동적으로 컴포넌트를 렌더링 하여 초기 렌더링 시간을 줄이는데, 그 사이에 보여지는 컴포넌트를 지정해 준다. Single-Page-App의 단점을 보완하고 Server-Side-Rendering을 더 강력하게 만들어주는 기능이라고 볼 수 있다.

 

Router.js

import React, { Suspense } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Loading from "./components/Loading";

const Main = React.lazy(() => import("./pages/Main"))

function Router() {
    return(
        <BrowserRouter>
            <Suspense fallback={<Loading />}>
                <Routes>
                    <Route path="/" element={<Main/>} />
                </Routes>
            </Suspense>
        </BrowserRouter>
    )
}

export default Router

Router.js에서는 경로에 따라서 어떤 dom(element)를 표시할지 결정하는 역할을 한다.

Suspense 태그를 사용하여 React.lazy 컴포넌트가 렌더링 되는 동안 Loading 컴포넌트를 보여준다.

경로가 "/"(Root)일때는 메인 컴포넌트를 보여주도록 했다.

 

Main.js

function Main() {
    return (
        <div>
            Main
        </div>
    )
}

export default Main

 Loading.js

function Loading() {
    return (
        <div>
            Loading
        </div>
    )
}

export default Loading

기존에 생성되었던 App.js 를 수정하여 Router를 불러온다.

import Router from "./Router";

function App() {
  return (
    <>
      <Router/>
    </>
  );
}

export default App

 

최종 결과물

이제 컴포넌트가 렌더링 되기 전에 로딩 컴포넌트가 화면에 표시된다.

다음 포스트에서는 react-router-dom의 동적 라우팅 기능을 활용하여 원하는 firebase 데이터를 렌더링 해보도록 하겠다.