[React] # 12 Router(1)
1차 프로젝트를 하면서 가장 헷갈렸던 부분이 router였습니다. 물론 리팩토링 과정을 겪으면서 Rest의 대한 이해와 더불어 보완은 되었지만 한 번 제대로 정리가 필요하여 블로깅을 하고자 합니다.
Routing
라우팅(Routing)이란 다른 경로(주소)에 따라 다른 화면(View)을 보여주는 것입니다. 하지만, 페이지가 한 개인 애플리케이션(SPA)인 리액트 자체에는 이러한 기능이 내장되어있지 않습니다. 따라서 리액트의 라우팅 기능을 위해 React-router라는 라이브러리를 사용합니다. (Third-party Library)
React Router
npm install react-router-dom --save
Route 컴포넌트 구성
Routes.js
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>
<Nav />
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/signup" component={Signup}/>
<Route exact path="/main" component={Main} />
</Switch>
<Footer />
</Router>
)
}
}
export default Routes;
index.js
ReactDOM.render(<Routes />, document.getElementById('root'));
위와 같이 컴포넌트를 구성하고 react-router-dom 객체에서 지원하는 컴포넌트와 메서드를 통해서 SPA에서 여러 view를 구현하는 것이 가능해지게 됩니다.
Link와 history props 사용 이동
<Link>
: 클릭 시 바로 이동하는 로직 구현,<Link>
컴포넌트는 DOM에서<a>
로 변환(Babel Compile)this.props.history.push()
: 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우
- ex. 로그인 버튼 클릭 시
- Backend API로 데이터(User Info) 전송
- User Data 인증 / 인가
- response message
- Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
- Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동
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;
import React from 'react';
import { withRouter } from 'react-router-dom';
class Login extends React.Component {
goToMain = () => {
this.props.history.push('/main');
}
// 실제 활용 예시
// goToMain = () => {
// if(response.message === "valid user"){
// this.props.history.push('/main');
// } else {
// alert("너 우리 회원 아님. 가입 먼저 해주세요")
// this.props.history.push('/signup');
// }
// }
render() {
return (
<div>
<button
className="loginBtn"
onClick={this.goToMain}
>
로그인
</button>
</div>
)
}
}
export default withRouter(Login);
props의 history 객체 내 push, replace 등의 method를 통해 다른 경로로 이동하거나 앞/뒤 페이지로 전환 할 수 있습니다. Route에 연결되어 있지 않은 컴포넌트에서 props에 route 정보(history)를 받으려면 export하는 컴포넌트를 withRouter로 감싸주어야 합니다. 이렇게 withRouter 와 같이 해당 컴포넌트를 감싸주는 것을 Higher Order Component(HOC) 라고 합니다.
Author And Source
이 문제에 관하여([React] # 12 Router(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@simoniful/React-12-Router1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)