React | Routes Component & Sass

SPA (Single Page Application)

Westagram-fontend: longin.html, main.html 등 - 페이지 수 만큼 html 파일이 존재한다.
리액트 프로젝트에서 .html 파일의 개수는? 1개 ==> SPA
한 개의 웹페이지(html) 안에서 여러개의 페이지를 보여주는 방법? => Routing

Routing

어떤 특정한 경로가 들어왔을 때 그 경로에 맞는 화면을 보여주는 것.
다시 말해 각각의 경로(url 주소)에 따라 다른 View(화면)을 보여주는 것이다.
리액트 자치에는 이러한 기능이 내장되어 있지 않다.

==> React Router : 리액트에서 라우팅 기능을 구현하기 위한 third-party 라이브러리

`npm install react-router-dom --save`

: react-router-dom 을 json의 dependencies에 upload 해라.
보통 자동적으로 업로드 되지만 간혹 업로드 되지 않은 경우가 있기 때문에 --save 명령어를 넣어주는 것이 좋다.

Routes Component 구현

import React from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
   } from 'react-router-dom';

import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';

class Routes extends React.Component {
    render() {
        return(
            <Router>
                <Nav />
                <Switch>
                    <Route exact path="/" component={Login} />
                    <Route exact path="/Main" component={Main} />
                    <Route exact path="/" component={Login} />
               </Switch>
               <Footer />
           </Router>
       )
     }
  }

export default Routes;

Router tag - 태그 안에 Routing 기능을 제공하겠다.

Router 이동하기

- <Link> 컴포넌트 사용하는 방법
- this.props.history.push() 로 구현하는 방법

1. <Link> 컴포넌트 사용하는 방법

Link tag는 to 라는 attribute 를 받고, 이 attribute의 값은 내가 이동할 page의 url이다.

import { Link } from 'react-router-dom';

class Login extends Component {
  render() {
      return (
          <div>
              로그인
              <Link to="/signup">여기를 눌러서 페이지 이동</Link>
          </div>
  );
 }
}

export default Login;

Link 태그는 페이지를 새로고침 하지 않고, a 태그는 새로고침을 한다.
리액트는 SPA 이므로 js 코드도 한번만 받아온다.

a 태그는 페이지를 새로고침하여 모든 html과 js 파일을 다 받아와야하기 때문에 component 역시 처음부터 다시 받아와서 rendering 해야한다. state 값 역시 초기화 된다.
==> 사용자가 페이지를 이용할 때 새로고침이 일어나는 것은 지양해야할 부분
a - 외부 사이트로 이동하는 경우
<Link> - 프로젝트 내에서 페이지 전환하는 경우

2. this.props.history.push()

import React from 'react';
import { withRouter } from 'react-router-dom';

class Login extends React.Component {

  goToMain = () => {
    this.props.history.push('/main');
  }

  // 실제 활용 예시
  // goToMain = () => {
  //   if(response.message === "valid user"){
  //     this.props.history.push('/main');
  //   } else {
  //     alert("너 우리 회원 아님. 가입 먼저 해주세요")
  //     this.props.history.push('/signup');
  //   }
  // }

  render() {
    return (
      <div>
        <button
          className="loginBtn"
          onClick={this.goToMain}
        >
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);

withRouter 는 함수이며, higher order component이다.
component를 인자로 받고 컴포넌트에 기능을 추가하여 새로운 컴포넌트를 반환한다. 인자로 들어간 컴포넌트에 기능을 추가하는 함수이다.

2가지 방법의 활용법

<Link>

• 클릭 시 바로 이동하는 로직 구현 시에 사용
• ex) Nav, Aside, 아이템 리스트 등의 페이지에서 상세 페이지로 이동

this.props.history.push()

• 페이지 전환 시 추가로 처리해야하는 로직이 있는 경우
• ex) 로그인 버튼 클릭시
• Backend API로 데이터(User Info) 전송
• User Data 인증/인가 등

Sass

CSS 전처리기 (pre-processor)

npm install node-sass —save
npm install node-sass@4.14.1 --save        // 특정 버전을 설치할 때

Sass는 왜 사용하는가?

라우팅 컴포넌트를 추가하면서 모든 컴포넌트를 Routes.js에서 import 할 것이다.
=> import된 컴포넌트의 css까지 모두 같이 적용된다.
(중복이 일어나기 쉽다. )
=> 태그 선택자 말고 클래스 와 nesting을 사용

설치 확인은 package-json의 dependecies 를 확인하면 된다.