React Router
- SPA
리액트는 html 파일이 1개인 SPA(Single Page Application, 페이지가 한 개인 애플리케이션) 이다. 한개의 웹페이지 내에서 여러 개의 페이지를 보여주는 방법은 Routing을 사용하는 것이다.
2. Routing
다른 경로(url 주소)에 따라 다른 View(화면)을 보여주는 것이다. 리액트에는 라우팅 기능이 내장 되어 있지 않아 third party library로 React-router 를 설치하여 사용해준다.
(1)Routes 컴포넌트 생성
//사용할 패키지 임포트
//코드 가독성을 위해서 상하위 태그 순서로 써준다
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
} from 'react-router-dom';
//컴포넌트가 사용되는 순서대로 import 해준다
import {Login} from './pages/Login/Login';
import {Main} from './pages/Main/Main';
export class Routes extends React.Component {
render() {
return (
<Router>
<Switch>
{/* 각각의 정확한 경로로 이동하기 위해 exact attr를 추가해준다. */}
<Route exact path="/" component={Login} />
<Route exact path="/main" component={Main} />
</Switch>
</Router>
)
}
}(2) 인덱스 js 에서 렌더
import React from 'react';
import ReactDOM from 'react-dom';
import {Routes} from './Routes';
ReactDOM.render(<Routes />, document.getElementById('root'));3. Route 이동하기
Routes 컴포넌트 내에서 각 페이지별 이동할 경로를 지정해 주었는데 각 페이지에서 어떤 포인트에서 다른 페이지로 전환이 될 것인지 명시해줘야한다.
Route로 이동하는 방법은 2가지가 있다.
(1) 컴포넌트
Routes 컴포넌트에서 설정한 경로의 url을 컴포넌트를 사용하여 페이지 전환이 이루어질 태그를 감싸준다. Link 태그에는 to attribute를 추가하여 값으로 경로를 지정해준다.
는 실제 돔에서 로 컴파일된다. : 프로젝트 내에서 컴포넌트 간의 이동이 필요할때(같은 사이트 내 페이지전환)import React from 'react';
import './Login.scss';
import {Link} from 'react-router-dom';
export class Login extends React.Component {
render() {
return (
<>
<section className="loginContainer">
<div className="loginItems">
<h1 className="logo">
Westagram
</h1>
<div className="formContainer">
<form action="#" method="GET">
<input className="fillInput idInput" type="text" placeholder="전화번호, 사용자 이름 또는 이메일"/>
<input className="fillInput pwInput" type="password" placeholder="비밀번호" />
{/* to attr 값으로 해당하는 url 경로를 지정해준다.*/}
<Link to="/main">
<button className="fillBtn" type="submit">
로그인
</button>
</Link>
</form>
</div>
<a href="#" className="linkToFindPw">비밀번호를 잊으셨나요?</a>
</div>
</section>
</>
);
}
}(2) withRouterHOC 구현 방법
다른 페이지로 이동하는 메소드를 클래스 내에 정의하고 페이지 이동하는 요소에 이벤트를 주어 이동하게 하는 방법이다.
import React from 'react';
import { withRouter } from 'react-router-dom';
export class Login extends React.Component {
goToMain = () => {
this.props.history.push('/main');
}
render() {
return (
<>
<section className="loginContainer">
<div className="loginItems">
<h1 className="logo">
Westagram
</h1>
<div className="formContainer">
<form action="#" method="GET">
<input className="fillInput idInput" type="text" placeholder="전화번호, 사용자 이름 또는 이메일"/>
<input className="fillInput pwInput" type="password" placeholder="비밀번호" />
<button className="fillBtn" type="submit" onClick={this.goToMain}>
로그인
</button>
</form>
</div>
<a href="#" className="linkToFindPw">비밀번호를 잊으셨나요?</a>
</div>
</section>
</>
);
}
}✨ 페이지 이동 방식으로 아무런 로직(조건) 없이 간단하게 이동하게 하고 싶을 땐(상품 상세페이지 등) 방법,
페이지 전환에 로직(조건)이 있어야 하는 경우엔(로그인, 개인정보 등) withRouterHOC 방법을 이용해준다
Sass
리액트에선 html 파일이 1개이기 때문에 css 파일이 여러개인 경우 오류가 난다. scss 를 사용하여 전환해주는 것이 좋다.
- 네스팅 기능
컴포넌트 JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해주고 최상위 요소 내에 모든 요소들이 네스팅 되는 구조로 바꿔줘야한다.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
}
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}//변수 선언
$theme-color: blue;
//여러 줄의 값을 가진 변수 선언
%flex-center {
display: flex;
justify-content: center;
align-items: center
}
//선언된 변수 사용은 @extend 키워드를 두어 사용한다.
login-container {
@extend flex-center;
button {
width: 200px;
height: 100px;
background-color: $theme-color;
&:hover {
background-color: red;
cursor: pointer;
}
}
input {
background-color: $theme-color;
&:focus {
background-color: red;
}
}
}