SPA란?

whdvkf92·2020년 10월 19일
0

React

목록 보기
11/12

SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다. 전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있습니다.

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

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

Link 컴포넌트는 클릭하면 다른 주소로 이동시켜 주는 컴포넌트 입니다.

<Link to='주소'>주소</LInk>

Route 하나에 여러 개의 path 설정하기

import React from 'react';
import { Link, Route } from 'react-router-dom';
import About from './component/About';
import Home from './component/Home';

const App = () => {
  return (
    <div>
      <Route path='/' component={Home} exact />
      <Route path={['/about', '/info']} component={About} exact />
    </div>
  );
};

export default App;

URL 쿼리

import React from 'react';
import qs from 'qs';

const About = ({ location }) => {
    const query = qs.parse(location.search, {
        ignoreQueryPrefix: true //이 설정을 통해 문자열 맨 앞의 ?를 생략합니다.
    });

    const showDetail = query.detail === 'true'; //쿼리의 파싱 결과 값은 문자열입니다.
    return (
        <div>
           <h1>소개</h1>
           <p>이 프로젝트는 리액트 라우터 기초를 실습해 보는 예제 프로젝트입니다.</p> 
           {showDetail && <p>detail 값을 true로 설정하셨군요!</p>}
        </div>
    );
};

export default About;

서브 라우트

서브 라우트는 라우트 내부에 또 라우트를 정의하는 것을 의미합니다.

import React from 'react';
import { Link, Route } from 'react-router-dom';
import Profile from './Profile';

const Profiles = () => {
    return (
        <div>
            <h3>사용자 목록:</h3>
            <ul>
                <li>
                    <Link to='/profiles/velopert'>velopert</Link>
                </li>
                <li>
                    <Link to='/profiles/gildong'>gildong</Link>
                </li>
            </ul>

            <Route path='/profiles' exact render={() => <div>사용자를 선택해 주세요.</div>} />
            <Route path="/profiles/:username" component={Profile} />
        </div>
    );
};

export default Profiles;


import React from 'react';
import { Link, Route } from 'react-router-dom';
import About from './component/About';
import Home from './component/Home';
import Profiles from './component/Profiles';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to='/'></Link>
        </li>
        <li>
          <Link to='/about'>소개</Link>
        </li>
        <li>
          <Link to='/profiles'>프로필</Link>
        </li>
       
      </ul>
      <hr/>
      <Route path='/' component={Home} exact />
      <Route path='/about' component={About} exact />
      <Route path='/profiles' component={Profiles} exact />
    </div>
  );
};

export default App;

Switch

Switch 컴포넌트 여러 Route를 감싸서 그중 일치하는 단 하나의 라우트만을 렌더링시켜 줍니다.

import React from 'react';
import { Link, Route, Switch } from 'react-router-dom';
import About from './component/About';
import HistorySample from './component/HistorySample';
import Home from './component/Home';
import Profiles from './component/Profiles';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to='/'></Link>
        </li>
        <li>
          <Link to='/about'>소개</Link>
        </li>
        <li>
          <Link to='/profiles'>프로필</Link>
        </li>
        <li>
          <Link to='/history'>History 예제</Link>
        </li>
      </ul>
      <hr/>
      <Switch>
      <Route path='/' component={Home} exact />
      <Route path='/about' component={About} exact />
      <Route path='/profiles' component={Profiles} exact />
      <Route path='/history' component={HistorySample} exact />
      <Route render={({location}) => (
          <div>
            <h2>이 페이는 존재하지 않습니다:</h2>
            <p>{location.pathname}</p>
          </div>
      )} />
      </Switch>
    </div>
  );
};

export default App;
profile
꿈 을 코딩하자

0개의 댓글