Qvil Blog

[React Router v4]SPA에서 다중페이지 구현(Feat. 성능최적화)

2017.07.23 — react.js, react-router — 1 min read

React Router란?

React는 컴포넌트 기반의 SPA(Single Page Application)를 만드는데 최적화 되어있다. /signin, /signup 등 React로 여러 페이지를 구현하기 위해서 React Router를 사용합니다.

Install

1yarn add react-router-dom
2# or, if you're not using yarn
3npm install react-router-dom

React Router Component

Import 예제

1import React from "react";
2import { BrowserRouter as Router, Route, Link } from "react-router-dom";

Link

a태그 이다.
to prop을 이용하여 해당 url로 link시켜준다.
exact를 붙이면 정확한 url에만 반응

1// /search에서도 홈이 나온다.
2<Link to="/">홈</Link>
3<Link to="/search">검색</Link>
4// / 일때만 홈이 나오고 /search에서는 홈이 나오지 않음.
5<Link exact to="/">홈</Link>
6<Link to="/search">검색</Link>

NavLink

각각 다른 링크에서 다른 스타일을 사용할 때 사용

Route

path props로 받은 path로 접속하면 component props의 컴포넌트로 연결시켜준다. 혹은 render props대로 render해준다.
Link와 마찬가지로 exact키워드 사용 가능.

1<Route exact path="/" component={Home} />
2<Route path="/render" render={() => (
3    <h3>Render Test</h3>
4)} />

Route component={컴포넌트}에서 props를 사용하고 싶다면

render 속성을 사용하면 된다.

예제

1<Route render={(props) => <MyComponent myProps="hello" />} />

Redirect

아래 코드는 logged가 false이면 /login/으로 redirect 시켜준다.

1const logged = true;
2
3const MyPage = () => {
4  return <div>{!logged && <Redirect to="/login" />}내 페이지</div>;
5};

Switch

Route컴포넌트를 감싸주면 호출된 URL컴포넌트만 호출한다.(불필요한 트래픽 방지)
마지막 Route컴포넌트로 404페이지 구현 가능

1<Switch>
2  <Route exact path="/" component={Home} />
3  <Route path="/about/:username" component={About} />
4  <Route component={NotFound} />
5</Switch>

검색 쿼리 파라미터 location

URLSearchParams라는 자바스크립트 고유 함수 사용해서 아래와 같이 브라우저에서 호출

http://localhost:3000/search?keyword=나

1<div>{new URLSearchParams(location.search).get("keyword")} Search</div>

나 출력