React 기초2 라우터(Router)

 

 

• 학습 내용

이번 시간에는 웹페이지의 작동방식인 SPA와 SPA를 활용한 화면 전환 방식인 Router에 대해서 학습하고자 한다. 

 

• SPA(Single Page Application)

전통적인 웹사이트는 페이지 이동 시 매번 페이지 전체를 불러와야 했다. 그런데 웹사이트가 복잡해지면서 문제가 발생하기 시작했다. 왜냐하면 중복되는 요소들을 매번 불러오면서 서버와의 불 필요한 트래픽을 발생시켰고 이로 인해 사용자가 느린 페이지를 봐야 하는 비효율적인 방법이 되었기 때문이다. 그래서 업데이트에 필요한 데이터만 서버에서 전달받아 화면에 보여주는 방식이 개발되기 시작했고, 이 것이 SPA(Single Page Application)이다. SPA는 화면을 업데이트하기 위한 데이터만 서버에서 전달받고 브라우저에서 해당 부분만 업데이트하는 방식으로 작동한다. SPA의 장점으로 사용자 입장에서 현저히 빠른 속도의 화면을 제공할 수 있다. 그리고 서버 과부하 문제 역시 상당 부분 해소해주며, 전체 페이지를 렌더링 하지 않기 때문에 사용자에게 더욱 깔끔한 UX를 제공한다.

 그러나 이런 SPA에도 단점이 있는데 브라우저가 렌더링할 때 HTML 파일을 읽다가 script태그를 발견하면 JavaScript파일을 다운받고 실행하는 방식으로 한다. 그런데 보통 SPA의 경우 HTML은 거의 비어있고 JavaScript가 무겁다 이 때문에 JS파일을 기다리는 첫 로딩 화면의 시간이 길다. 또 검색 엔진과 같은 환경에서는 최적화가 좋지 못하다는 단점 역시 있다.

 

• 라우팅(Routing)

라우팅(Routing)이란 경로에 따라 변경한다란 의미인데, 이것은 SPA환경에서 다른 주소에 따라 다른 뷰를 제공하는 과정을 말한다. 쉽게 말하면 주소에 따라 특정 컴포넌트를 업데이트하는 것이다. 이것을 사용하여 다양한 화면을 주소에 따라서 제공할 수 있다. 라우팅을 사용하기 위해서는 React Router라는 라이브러리를 사용해야 하는데, 설치하는 방법은 이러하다.

npm install react-router-dom

 

•  React Router

좀 더 구체적으로 라우팅에 대해 살펴서 리액트 라우터의 주요 기능에 대해 알아보고자 한다. 리액트 라우터는 크게 3가지의 역할로 구분할 수 있다. 먼저 라우터 역할을 하는 BrowserRouter, 그리고 경로를 매칭해주는 Switch와 Route, 마지막으로 경로를 변경하는 역할을 하는 Link가 있다. 사용 방법은 상단에 import를 해서 할 수 있다. 라우터의 사용 예시는 이렇다.

 import { BrowerRouter, Switch, Route, Link } from "react-router-dom"
 
 <BrowserRouter>
    <div className="App">
      <header>
        <nav>
          <ul className="menu">
            <li>
              <Link to="/">
                <button>Home</button>
              </Link>
            </li>
            <li>
              <Link to="/mypage">  
                <button>MyPage</button>
              </Link>
            </li>
            <li>
              <Link to="/dashboard">
                <button>Dashboard</button>
              </Link>
            </li>
          </ul>
        </nav>
      </header>

	 <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/mypage" component={MyPage} />
        <Route path="/dashboard" component={Dashboard} />
	 </Switch>
    </div>
 </BrowserRouter>