TIL #10 react router

SPA

SPA(Single Page Application)는 웹에서 새로운 페이지로 이동할 때마다 새로운 html 파일을 로딩하는 예전 방식과 달리,

html 파일이 하나로 이루어진 웹을 뜻한다.

SPA는 페이지가 로딩될 때마다 페이지의 모든 요소를 렌더링 하는 것이 아닌 하나의 html 파일을 통해 필요한 부분만 브라우저에서 렌더링 한다.

예전과 달리 담고 있는 정보와 기능이 많아진 현대의 웹에서 이전의 방식으로는 속도에서 문제가 생기기 때문에 나타나게 되었다.

React Router

라우팅(routing)이란 서로 다른 경로(url주소)마다 다른 화면(pages)을 보여주는 것이다.

리액트는 MVC 중 View만을 담당하기 때문에 자체적으로 라우팅을 구현할 수 없다.

(리액트가 프레임워크가 아닌 라이브러리로 불리는 이유) 

 

그렇기 때문에 리액트에서 라우팅 기능을 구현하기 위해서는 "react-router"라는 써드파티 라이브러리를 사용하여 구현해야 한다.

npm install react-router-dom --save

npm(node-packege-manager)를 통해 라이브러리를 설치할 수 있다.

 

react-router-dom 라이브러리를 통해 라우팅에 필요한 기능을 사용할 수 있다. (BrowserRouter, Switch, Route)

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;

• BrowserRouter : history API를 사용해 URL과 UI를 동기화하는 라우터
• Switch : 자식 컴포넌트 Route 중에서 url과 매칭 되는 첫 번째 요소를 렌더링 한다.

모든 페이지를 렌더링 하기 위해서는 위에서 작성한 Router.js 컴포넌트를 index.js에서 렌더링 해줘야 한다.

 

그 후에 각 페이지 컴포넌트(Login, Main) 파일에서 라우트 이동 방법을 설정해 준다.

 

exact 속성을 적용해 주는 이유 : exact 속성 미적용 시 "/main"으로 이동할 경우 "/main"은 "/"을 포함하고 있기 때문에 Login 컴포넌트와 Main 컴포넌트가 한화면에 보이게 된다.

---

Route 이동방법

route 이동 방법은 두 가지가 있다.

• Link 컴포넌트 사용
• withRouter HOC 구현

Link 컴포넌트

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

class Login extends React.Component {
    render() {
        return (
            <div className="Login">
                <section className="login_container">
                    <h1 className="title">Westagram</h1>
                    <form className="contents">
                        <div className="id_box input_box">
                            <input
                                className="input_id"
                                type="email"
                                placeholder="전화번호, 사용자 이름 또는 이메일"
                            />
                        </div>
                        <div className="pw_box input_box">
                            <input
                                className="input_pw"
                                type="password"
                                placeholder="비밀번호"
                            />
                            <button className="show_pw" type="button">
                                비밀번호 표시
                            </button>
                        </div>
                        <button
                            onClick={this.goMain}
                            className="submit_btn"
                            type="submit"
                        >
                            로그인
                        </button>
                        <a href="https://en.wikipedia.org/wiki/Help:Reset_password">
                            비밀번호를 잊으셨나요?
                        </a>
                    </form>
                    <div>
                        <Link to="/main">goMain</Link>
                    </div>
                </section>
            </div>
        );
    }
}

export default Login;

• react-router-dom에서 Link를 import 해야 사용할 수 있다.
• to 속성을 통해 이동하고자 하는 url 주소를 지정해 줄 수 있다. (to 속성을 이용하여 객체를 전달하는 것도 가능하다.)
• Link컴포넌트는 Babel을 통해 html의 a태그로 컴파일된다. => 역할이 같다!
• Link는 주로 프로젝트 내의 페이지 전환에, a는 외부 사이트로 이동하는 경우에 사용된다.

 

withRouter HOC

HOC(Higher Order Component)(고차 컴포넌트) : 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수

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

class Login extends React.Component {
    goMain = () => {
        console.log("this = ", this);
        console.log(this.name);
        this.props.history.push("/main");
    };
    render() {
        return (
            <div className="Login">
                <section className="login_container">
                    <h1 className="title">Westagram</h1>
                    <form className="contents">
                        <div className="id_box input_box">
                            <input
                                className="input_id"
                                type="email"
                                placeholder="전화번호, 사용자 이름 또는 이메일"
                            />
                        </div>
                        <div className="pw_box input_box">
                            <input
                                className="input_pw"
                                type="password"
                                placeholder="비밀번호"
                            />
                            <button className="show_pw" type="button">
                                비밀번호 표시
                            </button>
                        </div>
                        <button
                            onClick={this.goMain}
                            className="submit_btn"
                            type="submit"
                        >
                            로그인
                        </button>
                        <a href="https://en.wikipedia.org/wiki/Help:Reset_password">
                            비밀번호를 잊으셨나요?
                        </a>
                    </form>
                </section>
            </div>
        );
    }
}

export default withRouter(Login);

• Link와는 다르게 로직(goMain)을 작성하여 이벤트에 적용해 줄 수 있다.
  (데이터 전송, 인증/인가 등)
• export 시 component를 withRouter 함수의 인자로 전달해 주어야 한다.

---

Sass(Syntactically Awesome Style Sheet)

그저 단순하고 지루한 css를 훨씬 가독성 좋고 효율적으로 만들어주는 css 확장 언어이다.

 

html과 같이 구조를 볼 수 있는 Nesting이 가능하고, 프로그래밍 언어와 같이 변수 선언도 가능하다.

 

SPA로 작동하는 react에서는 모든 css가 하나의 페이지로 모이게 된다. 
이 경우 각각의 컴포넌트 별로 css를 적용해주기 위해 sass를 사용한다.

 

일반적인 css

.pw_box {
    display: flex;
    justify-content: space-between;
    white-space: normal;
}

.show_pw {
    display: none;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: #fafafa;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
}

sass

$color-white: #ffffff;
$color-lightgrey: #fafafa;
$color-grey: #8e8e8e;
$button-color: #0095f6;
$border: 1px solid rgba(0, 0, 0, 0.2);

원하는 속성을 변수화 해서 적용할 수 있다.

             .pw_box {
                display: flex;
                justify-content: space-between;
                white-space: normal;

                .show_pw {
                    display: none;
                    justify-content: center;
                    align-items: center;
                    border: none;
                    background-color: $color-lightgrey;
                    white-space: nowrap;
                    font-size: 10px;
                    font-weight: 600;
                }
            }

pw_box 클래스 명을 가진 요소의 자식 요소로. show_pw라는 클래스 명을 가진 요소를 포함하고 있다.