router에 들어가기 전, SPA에 대해 간단히 정의하고 넘어가보자
Single Page Application, 즉 페이지가 하나인 애플리케이션
다수의 페이지가 존재하는 전통적 애플리케이션보다 기능 및 속도적인 면에서 우수한 장점이 있다.
Routing 기능을 통해 하나의 웹페이지 안에서 여러 상태의 페이지를 보여줄 수 있다.
라우팅 기능은 다른 경로(url 주소)에 따라 다른 View(화면)을 보여주는 기능이다. (사전적으로는 패킷, 즉 특정 컨텐츠가 목적지까지 갈 수 있도록 전송 경로를 지정하는 것을 뜻한다.)
리액트 자체는 Route 기능을 갖고 있지 않기 때문에 npm
을 통해 추가로 설치를 해주어야 한다. (해당 프로젝트 이외 Router
, sass
등 프로그래밍을 도와주는 플러그인이나 라이브러리들을 추가로 설치하게 되는데 이들을 Third-party Library라고 한다.)
npm install react-router-dom --save
import React from "react"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; // import Login from "./pages/Login/Login"; // class Routes extends React.Component { render() { return ( <Router> <Switch> <Route exact path="/" component={Login} /> <Route exact path="/main" component={Main} /> </Switch> </Router> ); } } // export default Routes;
BrowserRouter(Router)
component: 경로를 지정해주는 컴포넌트
A as B
: A라는 컴포넌트를 B의 이름으로 사용하겠다는 뜻이다.Swtich
component: 첫번째로 매칭되는 path
를 가진 컴포넌트를 렌더링시키는 attribute이다. (early return
과 비슷함)
Route
component:
path = ""
attribute: 컴포넌트가 렌더링이되는 URL을 지정할 수 있다.exact
attribute: 부분적 일치가 아닌, 정확하게 일치하는 URL을 얻기 위해 사용한다.import Routes from './Routes'; ReactDom.render(`<Routes>`, document.getElementById('root));
<Link>
componentreact-router-dom에서 제공하며 클릭 시 바로 이동하는 로직 구현에 주로 사용된다. (정보 처리 고려 X)
DOM에서 <a>
로 컴파일된다.
ex) Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 상세페이지로 이동
a vs Link
<a>
: 외부 사이트로 이동
<Link>
: 프로젝트 내 페이지로 전환할 때 사용한다.
import React from "react"; import { Link } from "react-router-dom"; class Login extends React.Component { render() { return ( <div> <Link to="/해당경로"> 클릭 시 이동을 원하는 컨텐츠 </Link>; </div> ); } } export default Login;
withRouterHOC
페이지를 전환할 때 처리할 로직이 있을 경우 사용하여 구현 (단순 링크 X)
import React from "react"; import { withRouter } from "react-router-dom"; // class Login extends React.Component { goToMain = () => { this.props.history.push("./mainym"); }; render() { return ( <> <button className="loginButton" type="submit" onClick={this.goToMain}> 로그인 </button> </> ); } } export default withRouter(Login); // login 컴포넌트에서 props에 route 정보를 받으려면 export하는 컴포넌트에 withRouter로 감싸주어야 한다.