[Epic React][Build an Epic React App][Router][라우터]

bookshelf/INSTRUCTIONS.md at exercises/05-routing · kentcdodds/bookshelf (github.com)

GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop

Background

CSR에서 Routing 구현 시, URL을 변경하는 방법을 제공하고, URL에 맞는 UI를 그린다.

URL은 틀림없이 웹의 최고의 기능 중 하나입니다.  
한 사용자가 링크를 다른 사용자와 공유하여 특정 웹사이트의 콘텐츠로 직접 이동할 수 있는 기능은 환상적입니다.

React 애플리케이션 라우팅을 위한 표준 라이브러리는 React Router 다.

네비게이션과, 페이지 렌더링을 마크업 언어(실제로는 jsx)를 통해 선언적으로 표현한다.

• 참고 : 리액트의 관심사의 분리
  • 하이퍼링크를 위한 기능, 뷰(눈에 보이는 것)에 관련된 정보는 jsx에
    • 서스펜스와 에러 바운더리가 존재하는 이유
  • 스타일은 스타일시트에(혹은 className)
  • 유저 인터랙션을 위한 기능과 데이터 관련한 기능은 js에

아래 예시만 봐도 어떤 방법으로 동작하는지 알 것이다.

(내부에서 브라우저의 location, history를 사용하는 훅을 사용할 수 있다.)

페이지를 나타내는 컴포넌트 들이다

import * as React from 'react'
import ReactDOM from 'react-dom'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useParams,
  Link,
} from 'react-router-dom'

function Home() {
  return <h2>Home</h2>
}

function About() {
  return <h2>About</h2>
}

function Dog() {
  const params = useParams()
  const {dogId} = params
  return <img src={`/img/dogs/${dogId}`} />
}

function YouLost() {
  return <div>You lost?</div>
}

 

네비게이션이다. 클릭 시  URL이 변경된다. (a 태그 대체)

function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/dog/123">My Favorite Dog</Link>
    </nav>
  )
}

메인 앱은 React-Router의 내부 상태(path)에 따라 맞는 컴포넌트를 렌더링한다.

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <Nav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/dog/:dogId" element={<Dog />} />
        <Route path="*" element={<YouLost />} />
      </Routes>
    </div>
  )
}

function AppWithRouter() {
  return (
    <Router>
      <App />
    </Router>
  )
}

 

참고 : 라우터 직접 바닥부터 만들어보기

https://tylermcginnis.com/build-your-own-react-router-v4/

 

redirection

어떤 경우든 redirection은 서버를 이용하는 것이 좋다.

• redirection을 위한 불필요한 코드(ex) 기존 소스를 처리하고 다음 소스로 옮겨가야 하기 때문)
• status 코드(301, 302) 사용 불가(브라우저에 해당 URL이 불필요하다는 의미를 전달할 수 없음)

이것은 검색 엔진과 브라우저 캐시(오류 상태 코드에 대한 흥미로운 캐시 처리)에 영향을 미침.

 

더 자세한 내용은 아래를 확인하자.

Stop using client-side route redirects

useMatch 훅과 함께 NavLink만들기

NavLink는 Link(a를 대체한다 보면 됨)에 현재 url과 일치하는 컴포넌트에 스타일을 적용하기 위한 방법임.

function NavLink(props) {
  const match = useMatch(props.to)
  return (
    <Link
      css={[
        {
          display: 'block',
          padding: '8px 15px 8px 10px',
          margin: '5px 0',
          width: '100%',
          height: '100%',
          color: colors.text,
          borderRadius: '2px',
          borderLeft: '5px solid transparent',
          ':hover': {
            color: colors.indigo,
            textDecoration: 'none',
            background: colors.gray10,
          },
        },
        match
          ? {
              borderLeft: `5px solid ${colors.indigo}`,
              background: colors.gray10,
              ':hover': {
                background: colors.gray10,
              },
            }
          : null,
      ]}
      {...props}
    />
  )
}