12. react-router로 SPA

- SPA : Single Page Application (싱글 페이지 애플리케이션)

- 라우팅 관련 라이브러리인 react-router 를 사용예정

- react-router는 서드 파티 라이브러리, 비록 공식 라이브러리 아니지만 많이 사용하고 있음

create-react-app react-router-tutorial
yarn add react-router-dom
yarn add cross-env
yarn add query-string

 

package.json 변경

- ../ 안쓰고 바로 src 폴더가 기본으로 만들기위한것

전)

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

후)

"scripts": {
    "start": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

 

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Root from './Root';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Root />, document.getElementById('root'));
serviceWorker.unregister();

 

src/Root.js

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const Root = () => {
    return (
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    )
}

export default Root;

 

src/App.js

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

import {
  Home,
  About,
  Posts
} from 'pages';

import Menu from 'components/Menu';

// exact 값은 주소가 여기에서 설정한 path와 정확히 일치할 떄만 보이도록 설정
// 라우트 파라미터와 쿼리 읽기 위해 :{key}? 하면된다.
// posts 라우터안에 라우터 만들기위한 것
const App = () =>{
  return (
    <div>
      <Menu/>
      <Route exact path="/" component={Home}/>
      <Route path="/about/:name?" component={About}/>
      <Route path="/posts" component={Posts}/>
    </div>
  );
};

export default App;

 

src/pages/Home.js

import React from 'react';

const Home = ({history}) => {
    return (
        <div>
            <h2>홈</h2>
            <button onClick={() => {
                history.push('/about/javascript')
            }}>자바스크립트를 사용하여 이동</button>
        </div>
    );
};

export default Home;

 

src/pages/About.js

import React from 'react';
import queryString from 'query-string';

const About = ({location, match}) => {
    const query = queryString.parse(location.search);
    const {color} = query;

    return (
        <div>
            <h2 style={{color}}>소개</h2>
            <p>
                안녕하세요, 저는 {match.params.name} 리액트 라우터입니다.
            </p>
        </div>
    );
};

export default About;

 

src/pages/Post.js

import React from 'react';
const Post = ({match}) =>{
    console.log('Post', match);
    return (
        <p>
            포스트 #{match.params.id}
        </p>
    );
};

export default Post;

 

src/pages/Posts.js

import React from 'react';
import { Post } from 'pages';
import { Link, Route } from 'react-router-dom';

const Posts = ({match}) => {
    console.log('Posts', match);
    return(
        <div>
            <h3>포스트 목록</h3>
            <ul>
                <li><Link to={`${match.url}/1`}>포스트 #1</Link></li>
                <li><Link to={`${match.url}/2`}>포스트 #2</Link></li>
                <li><Link to={`${match.url}/3`}>포스트 #3</Link></li>
            </ul>
            <Route exact path={match.url} render={()=>(<p>포스트를 선택하세요</p>)}/>
            <Route exact path={`${match.url}/:id`} component={Post}/>
        </div>
    );
};

export default Posts;

src/pages/index.js

export { default as Home } from './Home';
export { default as About } from './About';
export { default as Post } from './Post';
export { default as Posts } from './Posts';

 

src/components/Menu.js

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

// <a herf ..>링크</a> 형식으로 하면 안된다. a 태그를 클릭해서 이동시키면 페이지를 새로고침하면서 로딩하기 때문에
// 새로고침을 방지하려면 리앹ㄱ트 라우터 있는 Link 컴포넌트를 사용해야 한다
const Menu = () =>{
    return(
        <div>
            <ul>
                <li><Link to="/">홈</Link></li>
                <li><Link to="/about">소개</Link></li>
                <li><Link to="/about/react">React 소개</Link></li>      
                <li><Link to="/posts">포스트 목록</Link></li>          
            </ul>
        </div>
    );
};

export default withRouter(Menu);

 

결과)