[React][react-router] react-router-dom v5

"react-router-dom"의 목적

 

SPA 개발에서, 페이지 이동을 위해

 

React로 Single Page를 개발하며 우리는 한 종류의 화면만 구성을 하는가?

→ X

우리는 여러 페이지의 웹 애플리케이션을 개발한다.

그 페이지들은 각각의 주소를 가져야, 유저들이 북마크를 하거나 검색엔진에도 최적화될 수 있다

 

Routing

 

다른 주소에 따라 다른 뷰를 보여주는 것을 Routing이라고 한다

우리는 이를 위해 react-router 라이브러리를 사용하게 된다

React에서 거의 유일한 Routing 패키지이며, 가장 많이 사용하는 패키지이다

 

설치 및 사용

 

yarn add react-router-dom

import { BrowserRouter, Route, Link, Switch } from "react-router-dom";

 

사용 문법 단어

 

각 페이지 마다의 Routing

 

// Components/Router.js

import React from "react";
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
import Web from "../Pages/Web";
import Design from "../Pages/Design";
import Server from "../Pages/Server";

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
	<Route path="/web" component={Web} />
        <Route path="/design" exact component={Design} />
        <Route path="/server" exact component={Server} />
        <Redirect from="*" to="/web" />
      </Switch>
    </BrowserRouter>
  );
};

export default Router;

 

• BrowserRouter
  • BrowserRouter를 최상위 컴포넌트로 하고, 그 안에 Route 컴포넌트를 작성한다
• path & component & render
  • path 로 url 경로를 지정한다
  • component 로 불러올 컴포넌트를 지정해준다 (import 해온 컴포넌트)
  • render 로 직접 렌더링도 가능하다

• exact & Composition
  • 같은 url이 중복되어 두 개 이상의 Route가 함께 렌더링되는 현상을 "Composition" 이라고 한다
  • 이와 같은 현상을 피하기 위해 exact 속성으로 정확한 url 지정한다
  • exact 를 제거해야 composition 및 중첩 라우팅을 활용할 수 있다
• Redirect
  • Redirect 컴포넌트로 해당되는 url이 없을 때의 경로를 지정한다
  • 이렇게도 활용이 가능하다 !<Route exact path="/"> {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />} </Route> // Redirect 컴포넌트를 사용하여 "new location으로 navigate" 해준다
• Switch
  • Swtich 컴포넌트 안에서는, 매치되는 path 하나만 Route 한다

 

Routing과 styled-components를 이용한 메뉴바

 

// Components/Header.js

import React from "react";
import { Link, withRouter } from "react-router-dom";
import styled from "styled-components";

const Header = styled("header")`
  margin-bottom: 30px;
`;
const List = styled("ul")`
  display: flex;
`;
const Item = styled("li")`
  margin-right: 20px;
  text-transform: uppercase;
  font-weight: 600;
  color: ${(props) => (props.selected ? "white" : "black")};
  background-color: ${(props) => (props.selected ? "#f1c40f" : "white")};
`;

export default withRouter(({ location: { pathname } }) => {
  // console.log(props);
  return (
    <Header>
      {/* header 태그 */}
      <List>
        {/* ul 태그 */}
        <Item selected={pathname.startsWith("/web")}>
          {/* li 태그 */}
          <Link to="/web">Go to Web</Link>
        </Item>
        <Item selected={pathname === "/design"}>
          <Link to="/design">Go to Design</Link>
        </Item>
        <Item selected={pathname === "/server"}>
          <Link to="/server">Go to Server</Link>
        </Item>
      </List>
    </Header>
  );
});

 

• Link
  • a 태그와 같은 기능이지만, SPA를 유지하여 한 페이지 속에서 경로만 바꾸어준다
• withRouter
  • Route 가 아닌 컴포넌트에서 Route의 props(location, match, history)를 사용하기 위해 withRouter 컴포넌트를 사용한다
  • [심화] HoC (Higher Order Component) https://ko.reactjs.org/docs/higher-order-components.html
  • HoC는 컴포넌트의 로직을 재사용하기 위한 React기술이다
• styled-components 와의 혼용
  • Item 태그에 selected 속성을 부여하여, true/false 값에 알맞게 CSS를 부여한다
  • [심화] NavLink 컴포넌트 React Router: Declarative Routing for React
  • 위와 같이 styled-components에 props를 넘겨 사용하는 방법 이외에, "Link" 태그 대신 "NavLink" 태그를 사용하여 activeStyle 속성으로 설정할 수 있다

 

중첩 라우팅 (Nested Routing)

 

// Pages/Web.js

import React from "react";
import { Link, Route } from "react-router-dom";
import WebPost from "./WebPost";

const Web = ({ match: { url } }) => {
  return (
    <div>
      <h1>This is Web</h1>
      <ul>
        <li>
          <Link to={"/web/1"}>Post #1</Link>
          {/* 추후 라우트 경로 변경의 확장성 고려 */}
        </li>
        <li>
          <Link to={"/web/2"}>Post #2</Link>
        </li>
        <li>
          <Link to={"/web/3"}>Post #3</Link>
        </li>
        <li>
          <Link to={"/web/4"}>Post #4</Link>
        </li>
      </ul>
      <Route path={"/web/:id"} component={WebPost} />
    </div>
  );
};

export default Web;

 

react-router가 ver 4로 업데이트 되면서 (현재 ver 5) Route에서 보여주는 컴포넌트 내부에서 다시 Route를 사용할 수 있게 되었다

• ver 4 이전에는 ?<Route path="foo" component={Foo}> <Route path=":id" component={Bar}/> </Route>Foo 컴포넌트에서 props.children 의 자리에 Bar 컴포넌트가 들어가는 형식이었고, 그래서 모든 라우트는 최상위에서 정해주어야 했다

즉, Nested Routing이란 Routing을 최상위 컴포넌트 뿐만이 아니라, 아래 컴포넌트에 걸쳐 단계별로 정의하는 라우팅 기법이다

 

참고자료

 

• https://velopert.com/3417https://react.vlpt.us/react-router/01-concepts.html
• https://www.npmjs.com/package/react-router-dom
• https://reactrouter.com/web/guides/quick-start
• https://github.com/joohaem/coin-explorer-react
• https://github.com/joohaem/joamflix

GitHub - joohaem/coin-explorer-react: NM Challenge Coin Explorer React to Hooks

GitHub - joohaem/joamflix