[REACT] Router & Sass

LEE JIYUN·2020년 7월 11일
0

Route ?

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);

Sass ?

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", }

0개의 댓글