08:00 ~ 03:30 헬스장
10:00 위코드 도착
오늘은 어제에 이어서 내가 기존에 만들었던 코드들을 리액트로 변환시켰다.
Single Page Application - 페이지가 한 개인 어플리케이션
기존에는 페이지의 수만큼 html 파일이 존재했지만 리액트에서는 오직 public 폴더에 html 하나만 존재한다. 이 페이지 안에 여러 개의 페이지를 보여주는 방법은 Routing을 사용한다.
다른 경로(url 주소)에 따라 다른 View(화면)을 보여준다.
리액트 자체에는 이러한 기능이 내장되어 있지 않다. 고로 리액트는 라이브러리로 분류된다.
일단 vscode에서 터미널을 켜서 아래의 명령어로 설치해야 한다.
npm install react-router-dom --save
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
} from 'react-router-dom';
// 위의 import 값들은 router에 필수로 작성
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>
)
}
}
// path에 '/'는 만약 페이지 주소가 http://localhost:3000/일 경우 3000 뒤의
/를 뜻함 가장 먼저 나타나는 주소에 부여.
export default Routes;
src폴더에 router.js 파일을 생성 후 위와 같이 작성.
index.js 폴더로 이동 후
ReactDOM.render(<Routes />, document.getElementById('root'));
render 안의 첫번째 인자는 보여지게 하므로 Routes.js를 rendering한다는 것이다.
<Link>
컴포넌트를 사용하는 방법과 withRouterHOC로 구현하는 방법 두 가지가 있다.
차이점은 withRouterHOC는 조건을 걸고 구현 가능하다.(ex 인증 인가)
<Link>
컴포넌트 사용방법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;
<a>
태그와 비슷하다고 생각하면 됨.
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);
실제 활용예시는 좀 더 공부 후 정리할 예정이다.