React Study (3) - Router

React Router

Routing (라우팅) 은 주소에 따라 다른 화면을 보여주는 것이다. MPA(Multi Page App) 에서 href 와 같이 링크로 다른 html 을 렌더링해주었던 것과 달리, SPA 는 Router 를 통해 하나의 페이지 안에서 js 파일을 통해 필요한 데이터만 렌더링해준다.

• Router - Url 경로와 컴포넌트를 연결해준다.

v6 이전의 route는 exact 키워드를 통해 정확히 일치하는 경로를 지정했고, Switch 컴포넌트 안에서 route 를 두어, 일치하는 첫번째 컴포넌트만 렌더링하게 했다.

Routes

• v6 이후의 Routes 에서는 현재 url 조건에 맞는 자식 컴포넌트만 렌더링을 해준다.
• exact 조건이 default
• 하위 항목들은 * 를 통해서 구별 가능하게 되었다.

import React from "react"
import { Routes } from "react-router-dom"
import { Route } from "react-router"
import Home from "~/pages/Home"
import PageA from "~/pages/PageA"

function RootRouter() {
    return (
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/a/*" element={<PageA />} />
        </Routes>
    )
}

export default RootRouter

Route 의 Props

route로 설정한 컴포넌트는 3가지의 Props 를 받는다

• history - push, replace를 통해 다른 컴포넌트로 이동하거나 앞 뒤 페이지로 전환한다
• location - 현재 경로에 대한 정보를 지니고 있고, url queryString 정보를 가지고 있다
  • query string 은 써드파티 라이브러리를 통해 parsing 한다
• match - 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params 정보를 가지고 있다
  • params 는 라우트에서 /about/:name 과 같이 지정한다 -> match.params.name 으로 접근가능

Link 컴포넌트

• 앱 내에서 새로 불러오는 것 없이 원하는 라우트로 전환해준다

import React from "react"
import { Routes, Link } from "react-router-dom"
import { Route } from "react-router"
import Home from "~/pages/Home"
import PageA from "~/pages/PageA"

function RootRouter() {
    return (
        <>
            <nav>
                <ul>
                    <li>
                        <Link to={"/"}>home</Link>
                    </li>
                    <li>
                        <Link to={"/a"}>a</Link>
                    </li>
                </ul>
            </nav>
            <hr />
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/a/*" element={<PageA />} />
            </Routes>
        </>
    )
}

export default RootRouter

<nav>...</nav><hr /><Routes>...</Routes> 를 <></>(fragement)로 감싼 이유 -> 리액트 컴포넌트 함수는 하나의 엘리먼트만 반환해야한다 

NavLink

• NavLink는 라우트 전환 + 전환에 따른 스타일을 적용할 수 있는 컴포넌트이다

import React from "react"
import styled from "styled-components"
import { NavLink } from "react-router-dom"

export interface INavButton {
    to: string
    label: string
}

function NavButton(props: INavButton) {
    const { to, label } = props
    return (
        <SNavLink activeClassName={"active"} to={to}>
            {label}
        </SNavLink>
    )
}

export default NavButton

const SNavLink = styled(NavLink)<{ activeClassName: string }>`
    padding: 0 16px;
    color: ${(props) => props.theme.color.White};
    &.${(props) => props.activeClassName} {
        color: ${(props) => props.theme.color.Primary};
        text-decoration: underline;
    }
`

위 코드에 SNavLink 는 Styled Component인데, 컴포넌트를 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리이다.