[TIL] React 공부일기 #6

리액트 라우터로 SPA 개발하기

SPA

Single Page Application. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미.
싱글 페이지라고 해서 화면이 한 종류인것만은 아니다. 다른 주소에 다른 화면을 보여 주는 라우팅을 사용하면 다양한 화면을 보여 줄 수 있다. 이 리액트 라우터 라이브러리에 대해서 공부하자.

SPA의 단점 : 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다 (페이지 로딩 시 사용자가 실제로 방문하지 않을 수 있는 페이지의 스크립트도 불러오기 때문). 일반 크롤러에서 정보를 제대로 수집해 가지 못한다.
(그러나 둘 다 다음에 배울 서버 사이드 렌더링으로 해결 가능)

리액트 라우터

리액트 라우터 설치할때 yarn add react-rourt-dom 으로 설치한다.

프로젝트에 라우터를 적용할 때는 아래와 같이
index.js에 BrowserRouter라는 컴포넌트를 사용해 감싸주자

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom' ;
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Route 컴포넌트를 사용하면 어떤 규칙을 가진 경로에 어떤 컴포넌트를 보여 줄 지 정의할 수 있다. 주소규칙을 배열로 설정해 주면 여러 경로에서 같은 컴포넌트를 보여줄 수 있다.

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

exact라는 props를 true로 적용하면 일치하는 주소규칙 때문에 발생하는 현상을 막을 수 있음
(예 : /about 경로로 들어갔는데 /about 경로가 / 규칙에도 일치해 두 컴포넌트가 모두 나타나는 현상)

<Route path="/" component={Home} exact={true}/>
<Route path="/about" component={About}/>

Link 컴포넌트는 클릭하면 다른 주소로 이동시켜 준다. a 태그와 달리 페이지 전환을 방지하는 기능이 내장되어 있다.

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

URL 파라미터와 쿼리

파라미터 예시 : /profile/velopert
쿼리 예시 : /about?details=true

일반적으로 파라미터는 특정 아이디 혹은 이름을 사용해 조회할 때 사용.
쿼리는 우리가 어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때 사용.

파라미터 예제 :

import React from 'react'
const data = {
 (...생략...)
}
const Profile = ({match}) => {
    const { username } = match.params;
    const profile = data[username]
    if (!profile) {
        return <div>존재하지 않는 사용자입니다.</div>
    }
    return (
        <div>
            <h3>
                {username}({profile.name})
            </h3>
            <p>{profile.description}</p>
            <WithRouterSample/>
        </div>
    )
}
export default Profile;

URL 파라미터를 사용할 때는 라우트로 사용되는 컴포넌트에서 받아 오는 match라는 객체 안의 params값을 참조한다. match객체 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보이는지에 대한 정보가 들어 있다.

사용하려면 App.js에서 위의 예제 js를 import한 후 아래 3번째 줄과 같이 라우트를 정의한다.
App.js 의 라우트에 /:username 을 적으면 username변수를 profile.js로 가져올 수 있다.
(profile.js로 불러올 땐 match.params 로 불러온다)

<Route path="/" component={Home} exact={true}/>
<Route path="/about" component={About}/>
<Route path="profile/:username" component={Profile} />

URL 쿼리

URL 쿼리는 ?detail=true&another=1와 같이 문자열로 되있다. 이 문자열을 객체 형태로 변환해야 한다. 이때 qs라이브러리를 사용한다. 설치하려면 yarn add qs로 설치해준다.

const About = ( {location} ) => {
    const query = qs.parse(location.search, {
        ignoreQueryPrefix: true // 문자열 맨 앞의 ?를 생략하는 코드
    });
    const showDetail = query.detail === 'true'; // 쿼리의 parse결과 값은 문자열이다.

파싱할 때 자료형(bool)이 아니라 문자열임을 기억하자.

서브 라우트

라우트 내부에 또 라우트를 정의하는 것을 의미한다. 별거읎다!
그냥 라우트로 사용되는 컴포넌트의 내부에 또 라우트 컴포넌트를 사용하면 된다.

history

특정 버튼을 누르면 뒤로 가거나, 로그인 후 화면 전환하거나, 다른 페이지로 이탈하는 것을 방지해야 될 때 사용한다.

예제 :

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('정말 떠나실 건가요?')
    }
    componentWillUnmount() {
        if (this.unblock) {
            this.unblock();
        }
    }
    render(){
        return (
            <div>
                <button onClick={this.handleGoBack}>뒤로</button>
                <button onClick={this.handleGoHome}>홈으로</button>
            </div>
        )
    }
}
export default HistorySample;