React | react-router로 라우팅 기능 사용하기
SPA (Single Page Application)
페이지가 한 개인 어플리케이션
전통적인 웹앱의 구조는 한 페이지당 하나의 html 문서를 가지고 있는, 즉 여러 페이지로 구성된 형태이다. 이런 형태는 다른 페이지로 이동될 때마다 매번 서버에서 리소스를 새롭게 다운로드받고 화면에 렌더링한다.
이런 점은 웹사이트가 복잡해지면서 효율성 측면에서 좋지 않다. 싱글페이지 어플리케이션은 하나의 페이지를 갖는 어플리케이션으로 하나의 페이지 안에서 여러 서브 경로를 갖고 경로에 따라 다른 페이지를 렌더링한다. 그리고 이런 기능을 구현하는것이 "라우팅"이다. 하지만 리액트는 이런 기능을 내장하고 있지 않기 때문에 별도의 라우터가 필요하다.
지난 시간에 그중에 가장 많이 사용하는 react-router를 설치했는데 이 라이브러리로 라우팅 기능을 구현해보도록 한다.
Routing in React
1. Routes 컴포넌트 구현하기
// Routes.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Login from './pages/Login/Login';
import Main from './pages/Main/Main';
import PageNotFound from './pages/PageNotFound/PageNotFound';
class Routes extends React.Component {
render() {
return(
<Router>
<Switch>
<Route exact path="/" component={Login}/>
<Route exact path="/main" component={Main}/>
<Route component={PageNotFound}/>
</Switch>
</Router>
)
}
}
export default Routes;
Routes
컴포넌트는 기본적으로 'react-router-dom'의 BrowserRouter
와 Switch
, Route
를 필요로 한다. 이것들로 한 페이지 안에서 서브 경로가 "a 일 때 A 컴포넌트를 렌더링하겠다"는 것을 지정해준다.
-
Switch
Switch
는 조건을 만족하는 하나의 컴포넌트만을 렌더링한다.
Switch
를 사용하지 않아도 라우팅 기능을 적용이 되지만,
위의 상황처럼path
경로를 지정하지 않은<Route>
가 있을 경우Switch
가 없으면 기본적으로 모든 페이지에서 컴포넌트PageNotFound
를 렌더링한다. 하지만Switch
가 있으면 조건을 만족하는 하나의 컴포넌트만 렌더링하고, 위의 모든 조건에 만족하지 않았을 때 기본값으로PageNotFound
컴포넌트를 렌더링하게 된다. -
exact
조건이 정확히 일치하는 컴포넌트를 렌더링한다. (경로 ===path
)
예를 들어exact
가 없을경우, 경로가 '/main'일 때 '/'와 '/main'의 컴포넌트를 둘다 렌더링한다.
2. Route 이동하기
Routes.js에서는 각 페이지에 서브 경로를 부여하여 한 페이지 내에서 다른 컴포넌트를 렌더링하도록 했다. 이제 컴포넌트 내에서 라우팅 기능이 동작하게 하는 매개체가 필요하다. 이런 매개체 역할을 하는 엘리먼트를 만드는 데는 두 가지 방법이 있다.
<Link>
withRouterHOC
<Link>
태그 사용하기
// Main.js
import React from 'react';
import { Link } from 'react-router-dom';
class Main extends React.Component {
render() {
return(
<div className="main">
...
<Link to="/">
</div>
)
}
}
export default Main;
- 'react-router-dom'에서
Link
컴포넌트를 가지고 온다. - 구현할 컴포넌트 안에
Link
태그를 넣는다. to
속성을 사용하여 이동할 경로를 지정해준다.
<Link
태그는 a
태그로 렌더링 된다. 스타일링할 땐 a
태그명이나 별도의 클래스를 통해 할 수 있다.
withRouterHOC
사용하기
// Login.js
import React from 'react';
import { withRouter } from 'react-router-dom';
class Login extends React.Component {
goToMain() {
this.props.history.push('/main');
}
render() {
return(
<div className="login">
...
<button onClick={this.goToMain}>
로그인
</button>
</div>
)
}
}
export default withRouter(Login);
react-router-dom
에서withRouter
를 가져온다.- 컴포넌트 안에 페이지를 이동하는 메소드를 추가한다.
this.props.history.push( _경로_ )
- 컴포넌트 안에 엘리먼트에 이벤트가 발생했을 때 메소드를 실행시켜 페이지를 이동할 수 있다.
- 컴포넌트를 내보낼 때는 꼭
withRouter
로 감싸서 내보내야 한다.
-
Link
태그는 a 태그처럼 사용되기 때문에 '클릭 시 이동'이 기본 실행 동작이다. 그렇기 때문에 이런 기본 로직을 요구로 할 때 적합하다.
ex. 프로젝트 외의 이동 -
withRouter
의 경우에는 메소드를 직접 작성하는 것이기 때문에 '클릭 시' 뿐 아니라 다른 로직을 추가할 수 있다. 가령 인증과 같은 조건이 필요할 때이다.
ex. 프로젝트 내 이동, 로그인-> 회원가입/ 메인페이지
Author And Source
이 문제에 관하여(React | react-router로 라우팅 기능 사용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@fa0o00/React-react-router로-라우팅-기능-사용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)