리액트 4 기초 / 알아야 할것들 (3) route / 라우트 / 라우팅 / 설치하는 법 / 사용하는 법 / 기초 셋팅 소스 / history.push / 뒤로가기 / 이동하기

라우트는 싱글 페이지 어플리케이션(SPA)을 위해 최적화된 리액트에서 페이지를 나누는 것이다.

페이지를 구분해 주고 이동해 다닐 수 있도록 한다. 

 

라우팅 사용을 위해서는 리액트 라우트 돔을 설치해야하는데 VSCODE 터미널에서 그냥 npm instll을 통햇 설치하면 된다.

 

npm install react-router-dom

 

import React from "react";

import {

  BrowserRouter as Router,

  Switch,

  Route,

  Link

} from "react-router-dom";

 

그리고 사용하려는 페이지 상단에 import 해준다. 

 

나아가서 기본적으로 라우팅을 쓰기 위해 인덱스와 앱에서의 기본 셋팅 소스가 있다. 

 

index

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import {

  BrowserRouter as Router,

} from "react-router-dom";

 

ReactDOM.render(

  <Router>

    <App />

  </Router>,

  document.getElementById('root')

);

 

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

 

App 

import React from "react";

import {

  BrowserRouter as Router,

  Switch,

  Route,

  Link

} from "react-router-dom";

 

export default function App() {

  return (

    <Router>

      <div>

        <nav>

          <ul>

            <li>

              <Link to="/">Home</Link>

            </li>

            <li>

              <Link to="/about">About</Link>

            </li>

            <li>

              <Link to="/users">Users</Link>

            </li>

          </ul>

        </nav>

 

        {/* A <Switch> looks through its children <Route>s and

            renders the first one that matches the current URL. */}

        <Switch>

          <Route path="/about">

            <About />

          </Route>

          <Route path="/users">

            <Users />

          </Route>

          <Route path="/">

            <Home />

          </Route>

        </Switch>

      </div>

    </Router>

  );

}

 

function Home() {

  return <h2>Home</h2>;

}

 

function About() {

  return <h2>About</h2>;

}

 

function Users() {

  return <h2>Users</h2>;

}

Route 사용방법으로 path는 필수로 들어가야 하고 

컴포넌트는 component 해서 들어갈수도 있고

인자를 받을 경우에는 render 함수를 사용해 props 인자를 받고 함수 안에 컴포넌트를 그린다. 

 

1. <Route path=’주소’ component={[보여줄 컴포넌트]}/>
2. <Route path=’주소’ render={(props) => (<BucketList list={this.state.list} />)} />

 

위의 기본 셋팅과 달리 간단히 라우팅을 이해하기 위한 셋팅도 보자. 

App

   return (

      <div className='App'>

        <Route path='/' component={Home}/>

        <Route path='/cat' component={Cat}/>

        <Route path='/dog' component={Dog}/>

      </div>

    )

Home

import React from 'react';

 

const Home = (props) => {

    return (

        <div>

            Main page

        </div>

    )

}

 

export default Home;

 

Cat

import React from 'react';

 

const Cat = (props) => {

    return (

        <div>

            Cat page

        </div>

    )

}

 

export default Cat;

 

 

심플하게는 위와 같이 설치하면 이렇게 페이지가 나뉘어 등장한다. 

 

단, Route Path가 ‘/’ 가 따로있고 ‘/cat’이 따로 있을 때 

리액트는 ‘/cat’ 하면 ‘/’도 같이 보여줘야 한다고 생각해서 Main과 Cat 이 같이 뜨는 것

 

이를 방지하기 위해서는 exact를 붙여주면 /는 /만 /cat은 /cat만 불러온다. 안쓰면 /cat 뒤에 또 /2 이런게 와도 분리되지 않고 다 /cat 페이지로 들어온다. 

        <Route exact path='/' component={Home}/>

 

 

 

url파라미터 

파라미터 /cat/nabi

쿼리 /cat?name=nabi (?키=밸류)

 

url을 통해 파라미터를 줄 수 있다.

<Route path=’/cat/:cat_name’ component={Cat} />

 

이렇게 하고 주소창에 /cat/nabi 라고 치면 cat_name: ‘nabi’라고 파라미터 들어간다.

 

import React from 'react';

 

const Cat = (props) => {

    console.log(props.match);

    return (

        <div>

            Cat page<br/>

            Hi I'm cat {props.match.params.cat_name} ! 

        </div>

    )

}

 

export default Cat;

 

{props.match.params.cat_name} 으로 가져온 값을 보여준다.

 

링크

 

import React from 'react';

import { render } from 'react-dom';

 

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

import Home from './Home';

import Cat from './Cat';

import Dog from './Dog';

 

export default class App extends React.Component{

  constructor(props){

    super(props);

    this.state = {

 

    }

  }

 

  render() {

    return (

      <div className='App'>

        <div>

          <Link to="/">Home</Link><br/>

          <Link to="/cat/nabi">Cat</Link><br/>

          <Link to="/dog">Dog</Link><br/><br/>

        </div>

        <Route exact path='/' component={Home}/>

        <Route path='/cat/:cat_name' component={Cat}/>

        <Route path='/dog' component={Dog}/>

      </div>

    )

  }

}

 

이렇게 링크를 라우터로부터 임포트 해주고

링크 투 사이에 이동할 페이지를 넣어주어 클릭하면 이동하게 설정해줄 수 있다. 

 

history

 

import { withRouter } from 'react-router';

 

export default withRouter(App);

 

  componentDidMount(){

    console.log(this.props)

  }

 

 

withRouter는 history 라는 특이한 인자를 불러와준다.

 

            <Route path="/" exact render={(props) => <BucketList history={this.props.history} list={this.props.bucket_list} />}/>

 

App에서 넘겨주면 

BucketList 에서 push 사용이 가능해진다.

 

        <button onClick={() => {

          this.props.history.push('/cat/nabi')

        }}>/cat</button>

 

뒤로가기도 가능하다. 

 

        <button onClick={()=> {

          this.props.history.goBack();

        }}>go Back</button>