react-router

목차

 

프런트 앤드를 만들다 보면,

한 가지 페이지를 넘어 여러 가지 페이지를 넘나들어야 할 때가 많다.

이를 위해 react-routing을 배워보자

react-router

react의 장점은 component 구조로 인해,

부분적 변화를 효율적으로 반영 할 수 있다는 것이다.

그리고 react-router에서 그 장점을 극대화할 수 있는데,

 

기존에 페이지 이동을 하려면, 새로고침이 필수였다.

하지만 react 를 사용함에 따라,

컴포넌트 업데이트를 통하여 새로고침을 하지 않아도

페이지를 이동 할 수 있게 된다.

 

여기에 react-router를 사용함에 따라,

방금 말한 react의 장점을 더하여, 페이지 이동에서의

필요한 기능만을 사용 할 수 있게 된 것이다.

 

사용

먼저, react-router-dom 패키지를 다운로드하자

npm install react-router-dom

그다음 react 코드에서 import한 뒤,

Router태그를 열어 route(경로)를

지정해주자.

import React from 'react';
import {BrowserRouter, Route} from "react-router-dom";
import Home from './routes/Home'; // routes(경로)폴더에서
import Move from './routes/Move'; // 해당 링크를 구성하는 코드를 불러온다

function App() {
  return (
    <BrowserRouter> // 라우트는 종류가 2가지 있는데, 그중 하나를 선택해 태그로 적는다.
      <Route path="/" exact={true} component={Home} /> // 기본링크는 Home 컴포넌트를,
      <Route path="/Move" component={Move} /> // /Move 링크는 Move 컴포넌트를 불러온다.
    </BrowserRouter>
  );
}

export default App;

Router종류는 두 가지가 있는데,

HashRouter와 BrowserRouter 두 가지이다.

일단 대부분 BrowserRoute

r

를 쓰니 BrowserRouter를 쓰고,

이에 대해서는 후에 다시 기술하겠다.

 

이제 Home과 Move 컴포넌트를 코딩해보자.

Home.js

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

function Home(){
  return(
    <>
      <h1>U're in Home</h1>
      <Link to="/Move">Move</Link>
    </>
  )
}

export default Home;

Move.js

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

function Move(){
  return(
    <>
      <h1>U're in Move</h1>
      <Link to="/">Home</Link>
    </>
  )
}

export default Move;

결과

npm start로 코드를 실행시키면

기본 링크로써, Home이 렌더링 된다.

 

 

이제 Link Move를 누르면,

가 된다.

끝