[React] React Router

SPA (Single Page Application)

전통적인 웹페이지에서는 페이지를 이동할 때마다 전체 페이지를 서버에 요청한 후에 보여준다. 그러다 보니 페이지 내의 중복되는 부분들도 매번 요청하는 불필요한 트래픽이 발생하고 사용자 입장에서는 느린 반응성을 경험하게 된다. 그래서 문서 전체를 요청하는 게 아닌 업데이트가 필요한 부분의 데이터만 받아서 javascript가 동적으로 화면에 보여주는 방식인 SPA (Single Page Application)이 등장하게 되었다.

장점

• 사용자의 interaction에 빠르게 반응한다.
• 서버 과부하 문제가 줄어든다.
• 더 나은 사용자 경험을 제공한다.

단점

• SPA의 경우 javascript 파일의 크기가 크다. 그러다 보니 HTML 파일을 읽어올 때 script 태그 안의 javascript를 가져오는데 시간이 오래 걸려서 첫 화면의 로딩 시간이 길어진다.
• 검색엔진최적화 (SEO)가 좋지 않다. SEO는 HTML 파일 안에 있는 태그 및 정보들을 분석하지만 SPA의 HTML 파일에는 정보가 거의 없고 대부분 javascript 파일에 있다.

React Router

SPA가 Single Page라고 해서 하나의 페이지만 가지고 있는 것은 아니다. 블로그만 보더라도 홈페이지, 글쓰기 페이지, 글 목록 페이지 등등 다양하게 존재한다. SPA는 다른 페이지로의 링크 이동이 서버 요청 없이 하나의 페이지에서 이루어지게 한다. 이렇게 링크에 따라 다른 뷰를 보여주는 것을 Routing이라고 한다. React 자체에는 이러한 Routing 기능이 없기 때문에 React Router라는 라이브러리를 사용한다.

주요 컴포넌트

• <BrowserRouter>: HTML5의 history API를 이용해서 UI를 업데이트한다. Router를 사용하려면 항상 <BrowserRouter> 태그로 묶어줘야 한다.
• <Route path="">:  path에 들어가는 url 주소로 이동 시 랜더링 할 component를 지정한다.
• <Switch>: 여러 개의 <Route> 중에서 첫 번째로 일치하는 component만 랜더링 한다.
• <Link to="">: html의 a 태그와 동일하게 클릭했을 때 이동할 url을 지정한다. a 태그와 다른 점은 a 태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 새로고침이 발생한다. <Link> component에는 페이지 전환을 방지하는 기능이 내장되어있다.

function Example(){
    return(
        <BrowserRouter>
            <nav>
                <ul>
                    <li>
                      <Link to="/">Home</Link>
                    </li>
                    <li>
                      <Link to="/about">About</Link>
                    </li>
                </ul>
            </nav>
            <Switch>
                <Route exact path="/">
                    <Home />
                </Route>
                <Route path="/about">
                    <About />
                </Route>
            </Switch>
        </BrowserRouter>
    );		
}