[REACT] react-router-dom / react router

설치

• yarn add react-router-dom

사용

• BrowserRouter라는 컴포넌트
  • HTML5의 API를 이용하여 페이지를 새로고침 하지 않고도 주소를 변경
  • 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해준다.

실습

1. index.js를 다음과 같이 수정한다.

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

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

2. 두 js 페이지를 만든다.

• Home.js / About.js

// App.js

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

const App = () => {
  return (
    <div>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  )
}

export default App;

 오류 수정

• 이렇게 되면 "/"와 "/about"의 경로가 겹쳐서 같이 나온다.
• exact 속성을 추가한다.

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

Link 사용

• a 태그를 사용하면 페이지를 새로 로드해서 기존의 정보가 모두 초기화된다.
• 따라서 Link 태그를 사용한다.
• to 라는 속성을 사용하고, 만들어둔 Route 태그는 놔둔다.

const App = () => {
  return (
    <div>
      <ul>
        <li><Link to="/">홈</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
      <Route path="/" component={Home} exact={true}/>
      <Route path="/about" component={About} />
    </div>
  )
}

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

• 기존

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

 

• 업데이트 이후
• 꼭 배열로 써야한다.

<Route path="/" component={Home} exact={true}/>
<Route path={["/about", "/info"]} component={About} />

주소가 info인데도 about 화면으로 이동해있다

URL 파라미터 / 쿼리

• 파라미터 : /about/me
• 쿼리 : /about?phone=01011112222

URL 파라미터

• 파라미터로 쓸 부분에 /:파라미터 로 사용한다.

const App = () => {
  return (
    <div>
      <ul>
        <li><Link to="/">홈</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/profile/a">A Profile</Link></li>
        <li><Link to="/profile/b">B Profile</Link></li>
      </ul>
      <Route path="/" component={Home} exact={true}/>
      <Route path={["/about", "/info"]} component={About} />
      <Route path={"/profile/:username"} component={Profile} />
    </div>
  )
}

 

• 다음과 같이 사용할 수 있다.

import React from "react";

const data = {
    a: {
        name: "A",
        desc: "용의자 A씨"
    },
    b: {
        name: "B",
        desc: "용의자 B씨"
    }
};

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.desc}</p>
        </div>
    )
}

export default Profile;

쿼리

• 콘솔에 location을 쳤을 때, search 부분이다.

http://localhost:3000/about?me

http://localhost:3000/about?me=lee&age=98&tall=280

search 부분을 나누어주려면

• yarn add qs

qs 라는 라이브러리를 사용합니다.

 

import React from "react";
import qs from "qs";

const About = ({ location }) => {
    const query = qs.parse(location.search,{
        ignoreQueryPrefix: true // 쿼리 맨 앞의 ? 무시
    });

    const showMe = (query.me === "lee");
    
    return (
        <div>
            <h1>어바웃</h1>
            <p>어바웃 화면</p>
            {showMe && <p>저는 Lee입니다.</p>}
        </div>
    )
}

export default About;

-- 서브 라우트 --