SPA (Single Page Application)

이전의 VallinaJS를 이용한 프로젝트에서 페이지별로 html 파일을 구현했다면, 리액트로는 routing을 이용해 하나의 index.html로도 여러 페이지를 구성할 수 있다. 이를 SPA라고 한다.

React-router

Routing이란 하나의 html로 웹사이트 내에서 다른 경로로 이동 할 때에 다른 화면을 보여주는 것을 말한다.
리액트의 경우 해당 기능을 내장하고 있지 않아 React-router 라는 라이브러리를 따로 설치하여 라우팅 기능을 사용할 수 있다.

React-router 사용법

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>
        <Switch>
          <Route exact path="/" component={Login} />
	   <Route exact path="/signup" component={Signup}/>
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

1. npm install react-router-dom --save - React-router 설치 및 package.json에 버전 정보를 추가한다.

2. Routes.js에 경로에 따라 보여줄 컴포넌트.js 파일을 import 해준다.

3. Routes 컴포넌트의 render 부분 내부의 에 경로와 경로에서 보여줄 component를 입력한다.

4. index.js에서 Routes 컴포넌트를 import한 후 render에 를 입력하여 렌더될 수 있도록 한다.
   
   

페이지간에 전환하는 방법 - Route 이동 방법

1. <Link> 컴포넌트

• 클릭 시 바로 이동하는 로직 구현 시에 사용

2. withRouterHOC

• 페이지 전환 시 추가로 처리해야하는 로직이 있는 경우 사용
  
  

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

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

class Login extends React.Component {
  render() {
    return (
      <button>
        <Link to="/main">로그인</Link>
      </button>
    )
  }
}

export default Login;

1. { Link } 를 import한다.
2. 이동시켜줄 요소에 <Link to="이동경로"></Link> 를 추가한다.
   
   

2. withRouterHOC로 구현하는 방법

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

class Login extends React.Component {

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

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

export default withRouter(Login);

1. { withRouter } 를 import한다.
2. 이동시켜줄 요소에 event 속성과 해당 이벤트가 일어날 경우 실행될 함수명을 입력한다.
3. render() 윗 부분에 실행될 함수를 작성한다.
4. export default에 로그인 컴포넌트를 withRouter로 감싸준다.
   
   
   

Sass

라우팅 기능에 의해 여러 페이지의 소스들이 한 곳으로 모이기 때문에 선택자가 중복되는 경우 스타일이 꼬여버릴 수 있다. 이러한 문제점을 해결하기 위해 나온 것이 Sass이다.
Sass를 이용하면 기존에 쓰였던 css 파일을 scss 확장자로 수정한 후 컴포넌트 내부의 스타일을 html 구조에 따라 포함시켜주어 스타일을 정리할 수 있다. (nesting)

Sass 사용방법

1. npm install node-sass@4.14.1 --save - Sass 4.14.1 버전 설치 및 package.json에 버전 정보를 추가한다.

2. 컴포넌트 내부의 .css 파일의 확장자명을 .scss로 수정한다.

3. .js파일에서 최상위 요소를 컴포넌트명과 동일하게 변경시켜주고 .scss에도 변경된 className을 반영시켜준다.

4. Nesting 기능을 적용하여 html 구조에 따라 스타일 안에 스타일을 넣어 구조를 정리시켜준다.

5. 변수 활용, & 연산자, extend 등의 기능을 적용하여 코드를 정리한다.