<React> react router dom - Link to(string)까지

이번 시간에는 react router dom을 이용해 여러 상황에 따라 다른 페이지로 routing하는 방법을 배워보겠습니다.

react router dom?

React에서 라우팅 구현을 돕는 패키지

설치

%npm i react-router-dom

project

project
  |--src
   +|--components
     +|--nav.jsx
   +|--routes
     +|--home.jsx
     +|--about.jsx
   *|--app.jsx

app.jsx

• Router
  제공되는 Router는 BrowserRouter와 HashRouter 2종류가 있는데요.
  여기에서의 Router는 HashRouter를 의미합니다. HashRouter는 BrowserRouter와 다르게 URL을 http://localhost:3000/#/about과 같이 #(Hash)을 넣어 표시합니다. Router는 Component처럼 사용할 수 있고 react-router-dom에서 제공되는 나머지 Component들은 Router안에서만 활성화된다고 보시면 됩니다.
• Route
  Route는 path property와 현재 URL을 비교하여 현재 URL에 path property가 포함되면 component property에 할당된 Component나 Route 태그 안쪽에 적힌 코드를 보여주게 됩니다. 그런데 아래에 보면 component property에 component를 전달하는 방법 말고도 Route의 자식으로 component를 전달하는 방법도 있습니다. 두가지 방식 모두 보시는 바와 같이 가능합니다. 하지만 property에 전달하는 방법은 매번 새로운 element를 만드는 것과 동일하기 때문에 자식으로 전달되는 방식이 더 추천됩니다.
• Route exact property
  Route는 현재 URL과 비교하여 path가 포함되면 해당하는 Component를 보여준다고 했는데요. 말그대로 포함이기 때문에 만약 현재 URL이 /about 이라고 한다면 Home Component와 About Component가 모두 한 화면에 보여지게 됩니다.
  이런 상황을 피하고 싶다면 Route의 exact property에 true를 전달해주면 현재 URL과 정확히 일치할때만 해당하는 Component를 보여주게 됩니다.
• Route path property
  path property는 String과 String 배열 2종류로 전달 가능합니다. 배열로 전달할 경우 배열에 포함된 원소 하나라도 현재 URL에 포함되면 보여집니다. 배열로도 전달이 가능하도록 만든 이유는 여러 url에 대해 동일하게 보여져야할 Component를 위한 것으로 생각됩니다.
• Switch
  Switch component는 Switch 내부에 Route component가 존재하면 현재 path와 부합하는 첫번째 Route를 보여주게 됩니다.

import React from 'react';
import {
  HashRouter as Router,
  Route
} from 'react-router-dom';
import About from './routes/About';
import Home from './routes/Home';
import Nav from './components/Nav';

function App(){
  return(
    <Router>
      <Nav />
      <Route path='/' exact={true} component={Home} />
      <Route path='/about'>
        <About />
      </Route>
    </Router>
  );
}

export default App;

nav.jsx

• Link
  Link는 html의 a태그라고 생각하시면 됩니다. 그런데 a태그를 사용하지 않고 Link Component를 사용하는 이유는 a태그를 사용할 경우 페이지를 새로고침 시키기 때문입니다. Link Component를 이용하면 새로고침없이 페이지를 변경해줄 수 있습니다. 주의사항으로 Link Component는 Router안에서만 동작합니다.
• Link to(string)
  Link의 to property를 통해 보낼 URL을 string 으로 적어줍니다.
• Link to(Object)
  Link의 to property를 통해 보낼 URL을 Object로 전달합니다. Object의 pathname에 URL을 적어주면 됩니다. 다만 string으로 전달하는 to와 다른점은 변수를 전달할 수 있다는 겁니다. Object의 state에 담긴 정보가 그대로 URL에 할당된 Component의 props로 전달됩니다. 좀 헷갈릴 수 있으므로 자세한 내용을 따로 다루도록 하겠습니다.

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

function Nav(){
  return (
    <div>
      <Link to='/'> Home </Link>
      <Link to='/about'> About </Link>
    </div>
  );
}

export default Nav;

home.jsx

import React from 'react';

function Home(){
  
  return (
    <!--자세한 코드는 생략-->
    <div>This is Home</div>
  );
}

export defatult Home;

about.jsx

import React from 'react';

function About(){
  return <div>This is About</div>
}

export defatult About;

결과

Home 화면

About 화면