[react] Route, sass

😊 Route 사용하기

React + Route = 🔍

• react는 SPA(Single Page Application)으로 html 파일은 하나이고 인터렉션이 발생할 경우 변경된 부분만 재랜더링하는 방식으로 동작합니다.
• 기존 MPA와 같이 페이지 이동을 구현하기 위해서는 Route개념을 적용합니다.
• Route는 경로에 따라 다른 View를 보여주는 것입니다.
• 예를 들어,
  localhost/main 접속 👉 메인 컴포넌트 View!
  localhost/login 접속 👉 로그인 컴포넌트 View!
• React Router : Create React App(CRA)에 특별히 routing을 위한 기능이 포함되어 있지 않기 때문에, 가장 인기 있는 Routing solution인 react-router를 추가해서 routing을 사용합니다.

react-router 설치

$ npm install react-router-dom --save

Route 사용 방법

/src/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;

😊 SASS

SASS 사용 이유

• Sass는 CSS확장 언어로 안정적이며 강력한 기능을 제공합니다.
• 기존 css문법을 동일하게 사용가능하며 css의 한계를 극복할 수 있는 유용한 기능을 제공합니다.

SASS 설치

$ npm install node-sass --save 

SASS 특징 4가지

1) Nesting

• css 셀렉터들의 계층화로 관리, 적용이 가능합니다.
• 프로젝트 규모가 클수록 엄격한 css 셀렉터 네이밍 규칙을 사용하더라도 이름 충돌을 피하기는 어려운 일입니다.
• Scss Nesting 을 사용할 경우 상위 계층이 다르면 하위 스타일 요소들의 이름이 중복되어 의도치 않는 스타일적용을 피할 수 있어 독립적인 작업이 가능합니다.
• 기존과 비교

-- CSS
#main .header {
    background-color:red;
}

#login .header {
    background-color:blue;
}

-- SCSS
/* 개발자 A의 작업 영역 */
.main { 
    .header {
      background-color:red;
    }
}

/* 개발자 B의 작업 영역 */
.login { 
    .header {
      background-color:blue;
    }
}

2) mixin

3) variable

4) & 연산자