React | React Router (라우터)
리액트는 SPA(Single Page Application)로 구성되어있다.
즉, 한개의 페이지로 여러 화면을 보여준다는 것이다.
하지만 이 경우 내가 원하는 위치를 북마크 할 수 없는 등 다양한 불편함도 존재했다.
이러한 것들을 해결해주는 것이 바로 리액트의 라우터 기능이다.
1. SPA && 라우팅
: SPA란 페이지가 한개인 애플리케이션을 말한다.
기존의 홈페이지들이 페이지의 수만큼 html파일이 존재하였다면 spa 에서는 단 한개의 html안에서 페이지를 보여준다.
이러한 spa에서 페이지를 보여주는 방법이 라우팅이다.
2. 라우터 설치
: 사실 리액트 라우터는 CRA로 설치되는 기본 라이브러리는 아니다. 서드 파티 라이브러리로 추가적으로 설치해주어야 하지만 거의 표준처럼 사용되고 있다.
npm install react-router-dom --save
3. 라우트 컴포넌트 구현하기
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
} from 'react-router-dom';
import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';
class Routes extends React.Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/signup" component={Signup} />
<Route exact path="/main" component={Main} />
</Switch>
</Router>
)
}
}
export default Routes;
- path에 있는 경로로 이동할 경우 해당 컴포넌트를 보여주는 방식이다.
- 그럼 어떻게 이동시킬까? 그건 아래 라우트에서 제공하는 컴포넌트를 이용한다.
4. 라우트 이동하기
1) Link 컴포넌트 이용하기
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
} from 'react-router-dom';
import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';
class Routes extends React.Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/signup" component={Signup} />
<Route exact path="/main" component={Main} />
</Switch>
</Router>
)
}
}
export default Routes;
1) Link 컴포넌트 이용하기
: Link는 라우터에 내장되어 있는 컴포넌트이다.
앞으로 우리는 html의 a태그 대신에 이 링크 태그를 사용하게 될 것이다.
(사실 Link는 컴파일 되면 a로 변환한다.)
import React from 'react';
import { Link } from 'react-router-dom';
class Login extends React.Component {
render() {
return (
<div>
<Link to="/signup">회원가입</Link>
</div>
)
}
}
export default Login;
- 위의 예시처럼 Link를 클릭하면 /signup으로 이동시켜준다.
2) withRouterHOC 로 구현하는 방법
: 우리는 export default
방식으로 컴포넌트를 내보냈다.
하지만 export default withRouter
로 해당 컴포넌트를 내보내면 라우트로 바로 이동할 수 있게 된다.
import React from 'react';
import { withRouter } from 'react-router-dom';
class Login extends React.Component {
goToMain = () => {
this.props.history.push('/signup');
}
render() {
return (
<div>
<button
className="loginBtn"
onClick={this.goToMain}
>
로그인
</button>
</div>
)
}
}
export default withRouter(Login);
- 위에서 history.push를 이용해서 해당 패스로 이동할 수 있는 함수를 만들었고 onClick이벤트를 이용해서 이동하게 만들었다.
- 하지만 props의 history로 라우트 정보를 받기 위해서는 withRouter로 해당 컴포넌트를 내보내야한다.
Author And Source
이 문제에 관하여(React | React Router (라우터)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@xedni/router저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)