[리액트인액션]Chapter7. 리액트의 라우팅
SPA란?
- Single Page Application의 약자, 말 그대로 페이지가 1개인 어플리케이션
- 싱글페이지라고해서 한 종류의 화면만 있는 것은 아니다.
라우팅(Routing)이란?
- 리소스 탐색을 위한 시스템
- 주로 컴포넌트를 URL에 결합하는 방법
- 쉽게 말해, 다른 주소에 따라 다른 뷰를 보여주는 것
리액트에서의 라우팅
- 리액트 어플리케이션도 당연히 여러 화면들이 있고, 이 화면에 따라 각각의 주소도 가지고 있다.
- 때문에 다른 주소에 따라 다른 뷰를 보여주기 위해 라우팅 기능이 존재한다.
- 리액트의 공식 라우팅 라이브러리는 아니지만, `react-router`라는 라이브러리가 가장 보편적으로 사용되고 있다.
- 책(리액트인액션)에서는 직접 구현하여 사용하는 내용이 담겨있고, 라이브러리를 사용하지 않고 있어서 본 포스팅에서는 `react-router` 라이브러리의 사용법에 대해서 알아보려 한다.
react-router
- `react-router` 라이브러리는 앞서 말했듯, React 어플리케이션에서 가장 보편적으로 사용되는 서드파티 라이브러리이다.
- 이 라이브러리에서 포함하고 있는 여러 컴포넌트들을 활용하여 라우팅을 사용할 수 있다.
Route 컴포넌트
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import { Home, Contents } from 'pages';
class App extends Component {
render() {
return (
<div>
<Route exact path="/" component={Home}/>
<Route path="/contents" component={Contents}/>
</div>
);
}
}
export default App;- 라우트를 설정할대는 Route 컴포넌트를 사용하고, 경로는 path값으로 설정한다.
- 첫번째 라우트에서 / 의 경우에 Home 컴포넌트가 보이도록 했고, 두번째 라우트에서는 /contents 에 Contents 컴포넌트가 보이도록 했다.
- 여기서 첫번째 라우트의 exact 키워드는 주어진 경로와 정확히 맞아야만 설정한 컴포넌트를 보여주도록하는 키워드이다.
- 만약 exact 키워드를 작성하지 않는다면, /contents 호출시 Home, Contents 컴포넌트가 모두 호출된다.
라우트 파라미터
라우트로 설정한 컴포넌트는 3가지 props를 전달받는다.
- history : push, replace를 통해 다른 경로로 이동하거나 앞,뒤 페이지로 이동할 수 있다.
- location : 현재 경로에 대한 정보를 지니고 있고, URL 쿼리 정보도 가지고 있다.
- match : 어떤 라우트에 매칭이 되었는지에 대한 정보와 params 정보를 가지고 잇다.
params 사용법
/contents/:name 라우트를 추가한다.
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import { Home, Contents } from 'pages';
class App extends Component {
render() {
return (
<div>
<Route exact path="/" component={Home}/>
<Route exact path="/contents" component={Contents}/>
<Route path="/contents/:name" component={Contents}/>
</div>
);
}
}
export default App;Contents 컴포넌트를 수정한다.
import React from 'react';
const Contents = ({match}) => {
return (
<div>
<h2>About {match.params.name}</h2>
</div>
);
};
export default Contents;URL의 params를 설정할 때, 위와 같이 설정하면 name이라는 params가 생성된다.
컴포넌트에서는 match.params.name으로 접근할 수 있다.
URL query 사용법
react-route v3 이후 버전부터는 URL 쿼리를 해석해서 객체로 만들어주는 기능이 내장되어 있지 않기 때문에, 라이브러리를 설치하여 사용해야한다.
import React from 'react';
const Contents = ({location, match}) => {
const query = queryString.parse(location.search);
console.log(query);
return (
<div>
<h2>About {match.params.name}</h2>
</div>
);
};
export default Contents;컴포넌트를 위와 같이 수정 후, /contents?urlquery=pnp 경로로 이동해보면 콘솔창에 { urlquery: "pnp" }라고 출력되는 걸 확인할 수 있다.
라우트 이동
Link 컴포넌트
- 리액트 앱 내에서 다른 라우트로 이동할 때는 <a href=""/> 형식으로 이동하면 페이지를 새로고침 하기 때문에 안된다.
- 새로고침을 막고 원하는 라우트로 화면 전환을 하기 위해서는 Link 컴포넌트를 사용해야한다.
import React from 'react';
import { Link } from 'react-router-dom';
const Menu = () => {
return (
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/contents">Contents</Link></li>
<li><Link to="/contents/foo">Contents Foo</Link></li>
</ul>
<hr/>
</div>
);
};
export default Menu;위와 같이 Menu 라는 컴포넌트를 생성해보자.
Link 컴포넌트의 to 속성을 이용해 원하는 라우트로 새로고침 없이 화면 전환을 할 수 있다.
NavLink 컴포넌트
NavLink 컴포넌트는 Link 컴포넌트와 유사하지만, 설정한 URL이 활성화 되면, 특정 스타일 또는 클래스를 지정할 수 있다는 특징이 있다.
import React from 'react';
import { Link } from 'react-router-dom';
const Menu = () => {
const activeStyle = {
color: 'green',
fontSize: '2rem'
};
return (
<div>
<ul>
<li><NavLink exact to="/" activeStyle={activeStyle}>Home</NavLink></li>
<li><NavLink exact to="/contents" activeStyle={activeStyle}>Contents</NavLink></li>
<li><NavLink to="/contents/foo" activeStyle={activeStyle}>Contents Foo</NavLink></li>
</ul>
<hr/>
</div>
);
};
export default Menu;여기서 주의할 점으로는 Route를 지정했을 때 처럼, 중첩될 수 있는 URL은 exact 설정을 해야된다는 점이다.
- 활성화 되었을 때, 특정 스타일을 설정하고 싶으면 activeStyle을 설정하면 된다.
- 활성화 되었을 때, 특정 클래스를 설저아고 싶으면 activeClassName을 설정하면 된다.