# SPA
single page Application 싱글 페이지 앱
# Routing
다른 경로에 따라 다른 view(화면)을 보여주는 것이다.
라우팅을 쓰려면 CRA를 이용해서 설치해야한다.
npm install react-router-dom --save
라우팅을 쓰는 이유? 🧐
npm start를 했을경우 index.js에 연결시켜준 화면만 구현되고
다른 페이지는 확인되지 못하게 된다.
다른 페이지를 보려면 index.js의 import와 다음값과,
ReactDOM rander()안에 있는 값을 변경시켜줘야한다.
이렇게 번거롭게 하는 방법이 아닌 라우터라는 방법을 이용해서
값을 변경하지 않고 다른 경로의 페이지를 보는 방법을 알아보자.
# Router
Switch
첫번째 라우트를 보여준다.
Route
현재 경로에서 해당 컴포넌트를 보여주기 위해 사용한다.
exact
정확하게 경로를 잡아주기 위해 사용한다.
exact가 없으면 검색창에 /main이라고 쳐도 안들어가진다.
Router 사용법
- Routes.js를 src 폴더 안에 생성해준다.
- Routes.js 파일에 라우트 컴포넌트를 작성해준다. (밑예 예시)
- index.js에 가서 app.js 가 있던 자리 import와 컴포넌트 자리에 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';
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;내가 index.js파일에 적용한 방법 📌
import Routes from './Routes';ReactDOM.render(
<React.StrictMode>
<Routes />
</React.StrictMode>,
document.getElementById('root')
);
참고 📌
# Route 이동
라우트를 사용해서 컴포넌트 간의 이동이 가능하다.
2가지 방법으로 Route 이동이 가능하다.
link
링크 컴포넌트는 외부사이트로 이동할때나, 프로젝트내에서 페이지로 전환할때 사용된다.
클릭시 바로 이동하는 로직을 구현한다.
ex) Menu, 상품 사진을 클릭 후 상세페이지로 넘어갈때 사용.
링크 컴포넌트 사용방법
import {link} react-router-dom를 link 태그를 사용할 js 파일에 넣어준다.- link 안의 경로를 바꿔준다.
link to ="/Main"사용방법은 a태그와 같다.
withRouterHOC
뭔가 검사를 해주고 넘겨도 되는지 할때 withRouter를 쓴다.
- 페이지 전환할때 처리해야하는 로직이 있는 경우
- 로그인 버튼 클릭 시
- 백엔드 API로 데이터 전송
- User Data 인증.인가
- responese message
ex) 로그인 페이지에서 비밀번호와 아이디를 잘 입력했을때만 다음화면으로 넘어갈때 사용.
import { withRouter } from 'react-router-dom';를 link 태그를 사용할 js 파일에 넣어준다.- 맨마지막 export에
withRouter(Login)감싸줘야한다. - onclick 메서드를 클릭이벤트를 넣어주고 싶은 곳에 넣어준다.
- 원하는 페이지로 넘어갈 수 있게 하는 함수를 만들어준다.
내가 withRouterHOC 적용한 방법 📌
import { withRouter } from 'react-router-dom';
class Login extends Component {
goToMain = () => {
this.props.history.push('/main');
}
render() {
return (
<body>
<div className="login-wrap">
<h1 className="title">Westagram</h1>
<div className="inner-wrap">
<input className="id" type="text" placeholder="전화번호, 사용자 이름 또는 이메일" />
<input className="password" type="password" placeholder="비밀번호" />
<button onClick={this.goToMain}>로그인</button>
<p><Link to="/Main">비밀번호를 잊으셨나요?</Link></p>
</div>
</div>
</body>
);
}
}
export default withRouter(Login);
여기서 잠깐 🖐
함수안에 this.props.history.push('/main') 한번 더 해석하고 넘어가자.
History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다.
(즉, 페이지 변경으로 인한 깜빡거림이 없다.)
또, 현재 주소에 관련된 정보를 props로 조회 및 사용이 가능하도록 만들어준다.
