React Router :: SPA, 리액트 라우터에 대해 알아보자!

 

◎ SPA 

◎ 라우팅

◎ 리액트라우터

◎ Route컴포넌트

   + Route하나에 여러개의 path 설정하기

◎ Link 

◎ NavLink 

◎ Switch

 

---

 

라우터에 대해 알아보기에 앞서서 SPA에 대해서 먼저 알아보자~!

 

SPA ( Single Page Application )

한개의 페이지로 이루어진 애플리케이션을 뜻한다.

 

기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고

페이지를 로딩할때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주는 식으로 동작한다.

이때마다 트래픽이 많이 발생하고 사용자가 몰리면 서버측에 높은 부하가 쉽게 걸릴 수도 있다.

 

그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고,

우선 브라우저에 불러와서 실행시킨 후 필요한 부분만 자바스크립트를 이용하여 업데이트해준다.

 

○ SPA의 단점

앱의 규모가 커지면 페이지 로딩 시 실제로 방문하지 않을 수도 있는 페이지의 스크립트도 함께 불러오기 때문에

자바스크립트 파일이 너무 커진다는 것.

하지만 이 부분은 코드 스플리팅을 사용해 트래픽과 로딩속도를 개선할 수 있다.

 

라우팅

다른 주소에 다른 화면을 보여주는 것

리액트 라이브러리 자체에 이 기능이 내장되어 있지는 않아서 라이브러리를 사용하여 구현해야 한다.

리액트 라우팅 라이브러리는 리액트라우터(react-router), 리치라우터(reach-router), Next.js등이 있다.

 

 

---

리액트라우터

위 많은 라이브러리 중 사용빈도가 높은 리액트라우터를 사용해보자!

 

○ 라이브러리 설치

 

yarn add react-router-dom

 

CRA로 프로젝트를 만든 후 react-router-dom 라이브러리를 설치한다.

 

○ 라이브러리 사용

 

프로젝트에 리액트 라우터를 적용할 때는 리액트라우터의 내장되어있는 BrowserRouter라는 컴포넌트를 사용한다.

 

import { BrowserRouter } from 'react-router-dom';

 

○ Route컴포넌트

:: Route컴포넌트로 특정 주소에 컴포넌트 연결하기

 

Route라는 컴포넌트를 이용하여 어떤 경로에 어떤 컴포넌트를 보여줄지 아래와 같이 사용한다.

 

<Route path="주소"(ex. "/home") component={보여 줄 컴포넌트}(ex. {Home})/>

 

 

* '/' 경로

이때 경로에 '/'만 설정할 경우 /가 들어가는 모든 경로에 해당 컴포넌트에 함께 뜨기 때문에

'/'경로만 설정한다면 exact라는 props를 true로 설정해주어야 한다.

 

<Route path="/" component={Main} exact={true}/>
<Route path="/home" component={Home}/>

 

<Route path="/" component={Main} exact/> //true생략가능
<Route path="/home" component={Home}/>

 

 

+ Route하나에 여러개의 path 설정하기

여러개의 경로가 하나의 컴포넌트를 나타내도록 아래와 같이 표현할수 있다.

 

<Route path="/" component={Main} exact={true}/>
<Route path="/home" component={Home}/>
<Route path="/hello" component={Home}/>

 

하지만 중복되는 컴포넌트를 불러올때 두번, 세번씩 사용하는 대신 path props를 배열로 설정해주면 한줄로도 표현할 수 있다.

<Route path="/" component={Main} exact={true}/>
<Route path={["/home", "/hello"]} component={Home}/>

 

 

○ Link컴포넌트

:: Link컴포넌트로 다른 주소로 이동하기

 

Link컴포넌트는 클릭하면 다른 주소로 이동시켜주는 컴포넌트인데

일반적으로 사용하는 a태그와는 조금 다르기때문에 리액트라우터를 사용할때는 a태그를 직접 사용하면 안된다!

 

* Link컴포넌트 자체는 a태그로 이루어져 있지만 페이지 전환을 방지하는 기능이 내장되어 있다.

a태그는  페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 기존 상태들을 전부 날려버리고 처음부터 렌더링을 하게 된다.

하지만 Link컴포넌트를 사용하면 페이지를 전환해도 상태를 유지하고 HTML5 History API를 사용해 페이지의 주소만 변경해준다. 

 

<Link to="이동할 주소"(ex. "/home")>홈</Link>

 

○ NavLink컴포넌트

:: 경로에 따라 특정 스타일 혹은 클래스를 적용하기

 

NavLink는 Link와 같이 클릭하면 다른 주소로 이동시켜주는 역할을 하는데

Link와 달리 경로가 일치할 경우 특정 스타일이나 클래스를 적용하여 스타일을 줄 수 있다.

 

activeStyle예시

<ul>
    <li>
        <NavLink to="/profiles/merorii" activeStyle={{ background: 'black', color: 'white' }}>
            merorii
        </NavLink>
    </li>
    <li>
        <NavLink to="/profiles/gildong" activeStyle={{ background: 'black', color: 'white' }}>
            gildong
        </NavLink>
    </li>
</ul>

 

activeClassName예시

<ul>
    <li>
        <NavLink to="/profiles/merorii" activeClassName="active">
            merorii
        </NavLink>
    </li>
    <li>
        <NavLink to="/profiles/gildong" activeClassName="active">
            gildong
        </NavLink>
    </li>
</ul>

 

○ Switch

:: 여러 Route 중 하나를 렌더링하기

 

Switch 는 여러 Route 들을 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링시켜준다.

 

Switch를 사용하여 Route에 path를 지정하지 않으면 모든 상황에 렌더링 되는데

이를 이용하여 아무것도 일치하지 않았을때 보여줄 Not Found 페이지를 구현 할 수 있다.

 

<Switch>
  <Route path="/" component={Home} exact={true}/>
  <Route path={["info", "/about"]} component={About} />
  <Route path="/profile/:username" component={Profile} />
  <Route path="/profiles" component={Profiles} />
  <Route path="/history" component={HistorySample} />
  
  {/*path 를 따로 정의하지 않으면 모든 상황에 렌더링됨*/}
  <Route render={({location}) => 
    <div>
      <h2>존재하지 않는 페이지입니다.</h2>
      <p>{location.pathname}</p>
    </div>
  }/>
  
</Switch>