React Route는 가장 많이 사용되는 React Third-Party-Library 중 하나입니다.
주소에 따라 다른 UI를 보여주는 것
npm install react-router-dom --save
npm
node package manager를 통해
react-router-dom
route-dom을
install
설치하고
--save
package.json의 dependencies에
install된 sass version 정보를 저장합니다 →
"dependencies": { "react-router-dom": "^5.2.0", }
react-router-dom 사용하기 : index.js
import React from "react"; import ReactDOM from "react-dom"; import Routes from "./Route"; // '위에 언급된 것들을 이 파일에 사용하겠음'
ReactDOM.render( <Routes />, // '위에서 import한 Routes component를' document.getElementById("root") // 'Id가 "root"인 div에 넣겠음' );
react-router-dom 사용하기 : Route.js
import React from "react"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; /* 'BrowserRouter를 이 component에서 Router, Route, Switch라는 이름으로 사용하겠음' */ import jiyunMain from "./Pages/.../Main"; import jiyunLogin from "./Pages/.../Login"; // 'from 경로의 component를 이러이러한 이름으로 import하겠음'
class Routes extends React.Component { // '이것은 Routes라는 이름의 component임' render() { // component의 필수 method임 return ( <Router> <Switch> <Route exact path="/jiyunLogin" component={jiyunLogin} /> <Route exact path="/jiyunMain" component={jiyunMain} /> /* 'exact path "/~~~"에 component "{~~~}"를 할당해주겠음' 이제 주소 뒤에 "/~~~"를 붙이면 "{~~~}"를 보여줌 */ </Switch> </Router> ); } }
export default Routes; // 'Routes component를 export해서 다른 파일에서도 읽을 수 있게 하겠음'
withRouter HOC : Login.js
import { withRouter } from "react-router-dom"; /* withRouter추가 : history에 접근하여 component에서 router 조작 */
class Login extends Component { . . . goToMain() { this.props.history.push("/jiyunMain") // props history stack에 new Entry path를 push /* The term "history" refers to the history package, which is one of only 2 major dependencies of React Router (besides React itself), and which provides several different implementations for managing session history in JavaScript in various environments. */ } . . . } export default withRouter(Login);
CSS의 한계를 보완하여 보다 가독성 높고 코드 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)
- Variables : Store information that you want to reuse throughout your stylesheet.
$font-stack: Helvetica, sans-serif; $primary-color: #333;
변수에 $ style을 지정한 후에
body { font: 100% $font-stack; color: $primary-color; }
이렇게 사용합니다.
- Nesting : Nest your CSS selectors in a way that follows the same visual hierarchy of your HTML
nav { ul { list-style: none; li { display: inline-block; } a { display: block; } } }
- Operators : handful of standard math operators like +, -, *, /, and %.
article[role="main"] { float: left; width: 600px / 960px * 100%; }
npm install -g sass --save
npm
node package manager를 통해
sass
sass를
-g
전역(global)에서 사용할 수 있도록
install
설치하고
--save
package.json의 dependencies에
install된 sass version 정보를 저장합니다 →
"dependencies": { "node-sass": "^4.14.1", }