React-Router
SPA
- 현재 SPA(single Page Application : 페이지가(html) 하나인 어플리케이션) 을 사용
- 한개의 웹페이지 안에서 여러개의 페이지를 보여주기 위해서 Routing
Routing
- Routing 이란 다른 주소로에 따른 화면을 보여주는 것
- 하지만
React자체에는 이 기능이 내장 되어 있지 않다. (그래서 React가 framework 가 아닌 Library로 분류)
React Router
- CRA (creay React App) 에는 Routing을 위한 로직이 없으므로 third party library (react-router) 를 이용하여
routing 구현. 설치하기 위해서는terimal
에서 npm install react-router-dom --save입력하여 설치
참고) --save는 package-json에 설치한 내역을 넣어 달라고 하는것! 팀프로젝트시 초기 세팅을 위해서 꼭 필요한 것!
Routes component 구현
Routes.js 를 만들고 아래와 같이 구현한다. 구현을 위한 방법과 관련 설명은 아래와 같다.
import React from 'react'; //'react' node module의 리엑트폴더에서 React 를 가져온다.
import {
BrowserRouter as Router, //as 는 줄임하기 위한
Switch,
Route,
} from 'react-router-dom'
import Login from './pages/Login/Login';
import Main from './pages/Main/Main'; // 라이브러리 -> 컴퍼넌트 순서대로 적는다. 컴퍼너넌트도 밑에 나열되는 순서대로..
class Routes extends React.Compoenent { // component를 만드는중 React.Component 에서 상속받아서 Routes라는 component를 만듦
render (){ //render라는 매서드를 정의 해줌 (선언 해줌) function () {} 함수 선언 class 앞에서는 const funcion 을 쓰지 않음
return ( //리턴안의 것들이 실제로 랜더링 됨.
<Router> // react-router-dom 에서 가져온 Router (BrowserRouter) 미리짜놓은 코드를 가져옴
<Switch> /// react-router-dom 에서 가져온 Switch
<Rotue exact path = '/' component = {Login} /> /// react-router-dom 에서 가져온 Route Route 부분은 어떤 주소에 어떤 컴퍼넌트를 보여줄지 선언 해줌
<Rotue exact path = '/Main' component = {Main} /> /// Main component를 /main 페이지 보여줘라.
</Switch>
</Router>
)
}
}
export default Routes; //index.js에서 import 해준다. Routes.js가 만들어지면, index.js에서 Routes.js를 import 시킨다.
예)
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './Routes';
import './Styles/common.scss';
ReactDOM.render(<Routes />, document.getElementById('root'));Route 이동하기
Route 이동하는 방법은
1. <Link> component 사용하는 방법
2. withRouterHOC 로 구현하는 법
이 두가지의 활용법은
<Link>
- 클릭시 바로 이동하는 코드 구현 시
- Nav Bar, Aside Menu, 아이템 클릭시 -> 상세 페이지 이동
withRouterHOC
- 페이지 전환시 처리 해야할 로직이 있는 경우 (무조건 이동이 아니라 상황에따라 반응하기)
- 로그인시 회원가입 여부 등
<Link> 구현하기
import React from 'react';
import { Link } from 'react-route-dom'; //route-dom에서 Link 컴퍼넌트 import 해옴.
class Routes extends React.Compoenent {
render (){
return (
<Link to = '/main'>Go to Main Page </Link> ///Link component를 이용하여 /main로 이동. 버튼을 링크로 감싸는게 일반적이다. <a> 는 외부 사이트로 이동하는 경오 / <Link> 는 프로젝트 내부에서 (내부페이지) 전환 하는 경우
)withRouterHOC로 구현하기
import React from 'react';
import { withRouter } from 'react-router-dom';
goToMain = () =>{
this.props.histroy.push('/main'); //this는 여기서 객체 왜냐하면 .props 이므로 이 컴퍼넌트 객체 안에서 props 라는 프로퍼티가 있음 histroy 라는 객체 push는 매서드(); 이다.
};
render () {
return <div onClick={this.goToMain}>To Main Page </div> /// 클릭이벤트를 단다(온클릭) 자바스크립트니까 함수니까 {}했을때 클릭했을때 this.goToMain함수를 실행
}
//withRouterHOC 를 이용해야 함수를 걸어서 이동 할지 말지 정 할 수 있다. (로그인 페이지가 유효할때만..) link는 그냥 무조건 이동 이 필요할때만. Sass (Syntactically Awesome Style Sheets)
설치하기 및 확장자 바꾸기
terminal창에서 npm install nodes-sass --save실행하여 설치- 설치가 완료 되면 css 확장자를 .scss로 바꾼다. (import 구문도 수정한다. )
다양한 Sass기능
- nesting 기능
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
}
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;
}
}
}다양한 기능들이 더 있다. 아래의 링크에서 더 확인해서 추후 프로젝트에서 사용해보도록 익숙해지도록 해야겠다!
