[React] SPA

SPA

(Single Page Application, 싱글 페이지 애플리케이션)

 

프로젝트에 라우터 적용

설치

$ yarn add react-router-dom

 

// index.js
import { BrowserRouter } from 'react-router-dom'

React.DOM.render (
	<BrowserRouter>
    	<App />
    </BrowserRouter>
    ...
)

react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용하여 감싸면 됩니다. 이 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해줍니다.

 

 

1. Route 컴포넌트로 특정 주소에 컴포넌트 연결

<Route path="주소규칙" component={보여 줄 컴포넌트} />

Route라는 컴포넌트를 사용하여 사용자의 현재 경로에 따라 다른 컴포넌트를 보여 줄 수 있습니다. (ex. /Home, /About)

exact={true} exact라는 props를 true로 설정하게 되면 컴포넌트는 화면에 나오지 않습니다. - exact 기본값은 true이기에 exact라고 적어주기만 하면 됩니다.

 

2. Link 컴포넌트를 사용하여 다른 주소로 이동

<Link to="주소" >내용</ Link>

a태그를 사용하여 페이지를 전환하게 되면 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날려 버리게 됩니다

 

 

Route 하나에 여러 개의 path 설정

최신 버전의 리액트 라우터 v5부터 적용된 기능

<Route path={['/about', '/info' ]} component={보여 줄 컴포넌트} />

 

URL 파라미터와 쿼리

파라미터

특정 아이디 혹은 이름을 사용하여 조회할 때 사용합니다.

/profiles/ej-developer

 

쿼리

우리가 어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때 사용합니다.

/about?details=true

 

History

history 객체는 라우트로 사용된 컴포넌트에 match, location과 함께 전달되는 props 중 하나입니다.

이 객체를 통해 컴포넌트 내에 구현하는 메서드에서 라우터 API를 호출할 수 있습니다.

(ex. 특정 버튼을 눌렀을 때 뒤로 가거나, 로그인 후 화면을 전환하거나, 다른 페이지로 이탈하는 것을 방지해야 할 때)

import React, { Component } from 'react';

class HistorySample extends Component {
    handleGoBack = () => {
        this.props.history.goBack();
    };

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

    componentDidMount() {
        this.unblock = this.props.history.block('정말 떠나실 건가요?');
    }

    componentWillUnmout() {
        if (this.unblock) {
            this.unblock();
        }
    }

    render() {
        return (
            <div>
                <button onClick={this.handleGoBack}>뒤로</button>
                <button onClick={this.handleGoHome}>홈으로</button>
            </div>
        );
    }
}

export default HistorySample;

 

 

WithRouter (Hoc, Higher-order-Component)

라우터로 사용된 컴포넌트가 아니어도 match, location, history객체를 접근할 수 있게 해 줍니다.

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

const WithRouter = ({ location, match, history }) => {
    return (
        <div>
            <h4>location</h4>
            <textarea
                value={JSON.stringify(location, null, 2)}
                rows={7}
                readOnly={true}
            />
            <h4>match</h4>
            <textarea
                value={JSON.stringify(match, null, 2)}
                rows={7}
                readOnly={true}
            />
            <button onClick={() => history.push('/')}>홈으로</button>
        </div>
    );
};

export default withRouter(WithRouter);

withRouter를 사용할 때는 컴포넌트를 내보내 줄 때 함수로 감싸 줍니다. JSON.stringify의 두 번째 파라미터와 세 번째 파라미터를 null과 2로 설정해주면 JSON에 들여쓰기가 적용된 상태로 문자열이 만들어집니다.

 

Switch

여러 Router를 감싸서 그 중 일치하는 단 하나의 라우트만 렌더링 시켜 줍니다. 모든 규칙과 일치하지 않을 때 보여 줄 Not Found페이지도 구현합니다.

 

NavLink

현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일 혹은 CSS 클래스를 적용할 수 있는 컴포넌트 입니다.

import React from 'react';
import { NavLink, Route } from 'react-router-dom';

const Profiles = () => {
    const activeStyle = {
        background: 'black',
        color: '#fff',
        fontSize: 30,
    };
    return (
        <div>
            <h3>사용자 목록:</h3>
            <ul>
                <li>
                    <NavLink
                        activeStyle={activeStyle}
                        to="/profiles/velopert"
                        active
                    >
                        velopert
                    </NavLink>
                </li>
                ...
		</div>
	)
}

---

정리

리액트 라우터를 사용하여 주소 경로에 따라 다양한 페이지를 보여 주는 방법을 알았습니다.

라우트에 따라 필요한 컴포넌트만 불러오고, 다른 컴포넌트는 다른 페이지를 방문하는 등의 필요한 시점에 불러오면 더 효율적인 결과물이 나옵니다. 이 부분을 해결해 주는 코드 스플리팅 입니다.