[ React ] 리액트 라우터 React-Router

 

 

 

이번 게시글에선 간단하게 리액트-라우터(React-Router)가 뭔지 알아보고 사용할 예정이다.

​

​

 

 

리액트-라우터(React-Router)란?​

리액트는 SPA(Single Page Application) 방식으로 여러 개의 페이지를 이용해

 

페이지간 이동 개념이 아닌, 하나의 페이지 안에서 상황에 따라 필요 데이터만을 load 해주는 형태를 가진다.

​

이 때, URL 의 값에 따른 View Page 를 load 해서 보여주는 기능을 리액트-라우터(React-Router)가 담당한다.

​

​

먼저 react-router 라는 프로젝트를 만들고 해당 프로젝트 경로로 이동하자.

C:\> create-react-app react-router

C:\> cd react-router

 

 

React-Router 를 사용하기 위해 install 해주기. ( npm, yarn 중 원하는 걸로 받으면 된다. )

// npm install
npm install react-router-dom

// yarn install
yarn add react-router-dom

 

 

 

 

react-router 프로젝트를 코드편집기로 열어 아래와 같이 파일 생성.

 

 

소스 파일을 하나하나 살펴보자.

 

 

 

 

App.js

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom'; //React-Router import
import About from './About';
import Home from './Home';
import Memo from './Memo';

class App extends Component {
  render() {
    return(
      <div>
        <BrowserRouter>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/memo" component={Memo} />
        </BrowserRouter>
      </div>
    )
  }
}

export default App;

 

App.js 의 import 블럭부터 살펴보면

import { BrowserRouter, Route } from 'react-router-dom';
import About from './About';
import Home from './Home';
import Memo from './Memo';

 

첫 째줄은 React-Router 를 사용하기 위해서 이를 import 해준 것이고,

​

<BrowserRouter> 태그 안의 component 할당에 사용 될

 

About, Home, Memo 파일을 불러올 수 있게 import 했다.

 

그리고 render() 함수 안의 내용을 보면 아래와 같이 되어있는데

<div>
    <BrowserRouter>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/memo" component={Memo} />
    </BrowserRouter>
</div>

 

Route 태그는 반드시 Router 계열 태그 안에 작성해야하고 URL 경로를 설정해주는 태그이다.

​

예를 들어 path="/memo" component={Memo} 의 경우,

 

path 가 /memo 인 URL 이 호출 될 경우 Memo 컴포넌트를 할당해 load 해준다.

​

초기 화면이 열릴 때 path 에 대한 지정을 안했으니 path="/" URL 을 호출할테고,

 

Home 컴포넌트를 load 한다.

 

 

 

 

Home.js

import React from 'react';

const Home = ( { history } ) => {

    return (
        <div>
            <h3> Home Page </h3>
            <button onClick={ () => {history.push("/about")}}> About 버튼 </button>
            <button onClick={ () => {history.push("/memo")}}> Memo 버튼 </button>
        </div>
    );
}

export default Home;

 

방금 위에서 언급했듯 초기화면은 Home.js 가 load 되는데, 잘 보면 Home 컴포넌트는 history 를 인자로 받는다.

​

그런데 앞의 App.js 에서 history 를 인자로 넘겨준적이 없지만 어떻게 history 를 인자로 받았을까?

 

Route 태그는 기본적으로 props 에 match, history, location 을 넘겨주기 때문에

 

호출되는 컴포넌트에서 history 를 인자로 받아낼 수 있다.

​

그리고 About 버튼과 Memo 버튼을 클릭하면 history.pust 를 URL 을 새로고침 없이 이동시켜준다.

​

즉, About 버튼을 클릭하면 "/about", Memo 버튼을 클릭하면 "/memo" URL 을 호출하게 되고,

​

이를 App.js 에서 path 에 맞게 할당해 놓은 컴포넌트들을 load 해주기에 화면에 해당 화면이 뜨게 되는 것이다.

 

 

 

 

About.js

import React from 'react';

const About = ( { history } ) => {

    return (
        <div>
            <h3> About Page </h3>
            <button onClick={ () => {history.goBack()} }> 뒤로 버튼 </button>
        </div>
    );
}

export default About;

 

About 컴포넌트인데 눈여겨 볼만한 것이라곤 history.goBack() 함수. history 가 가지고 있는 자체 함수들 중 하나이다.

​

뒤로 가기 기능을 수행해 주는데, 이 외에도 go(), blick(), replace() 등이 있다.

​

 

 

 

Memo.js

import React from 'react';

const Memo = ( {history} ) => {

    return (
        <div>
            <h3> Memo Page </h3>
            <button onClick={ () => {history.goBack()} }> 뒤로 버튼 </button>
        </div>
    );
}

export default Memo;

 

Memo 컴포넌트 역시 About 컴포넌트와 동일.

 

 

 

 

 

 

실행화면 - 초기화면

 

 

 

실행화면 - About 버튼 클릭 후

 

 

 

실행화면 - 뒤로 버튼 클릭 후