[번역] React Router

dev.to 의 Brontesewell 이 작성한 React Router 번역 자료입니다. 번역에 문제가 있다면 댓글 달아주시구요. 원문을 보시기를 추천드립니다

React Router 무엇인가요?

React Router는 React의 표준 라우팅 라이브러리입니다. React Router 및 동적 클라이언트 측(client-side) 라우팅을 통해 사용자가 탐색 할 때 페이지를 새로 고치지 않고 탐색 할 수있는 싱글 페이지 웹 애플리케이션을 구축 할 수 있습니다. 다음과 같습니다:

“React Router는 UI와 URL의 동기화를 유지합니다. 게으른 코드 로딩(lazy code loading), 동작 라우트 매칭와 로케이션 전환와 같은 강력한 기능을 갖춘 간단한 API 가 내장되어있습니다. URL을 나중에 생각하지 말고 현재의 생각으로 만드세요”

React Router 설치:

우리의 앱에서 우리는 메인 부모(main parent)가 index가 되도록 할 것입니다. 그 다음 하위 컴포넌트(children component)로 App, User 와 About 이 있습니다.

npm install react-router-dom
npm start  //to run  dev server

index.js 파일을 열고 3가지 컴포넌트를 임포트 하세요. 예 :

 //index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import Users from './users'
import About from './about'

ReactDOM.render(<App />, document.getElementById('root'))

React Router는 라우팅을 구현하는데 도움이 되는 3가지 컴포넌트를 제공합니다. 위 코드에 다음을 추가하겠습니다.

import { Route, Link, BrowserRouter as Router } from ‘react-router-dom'

라우터 컴포넌트는 다음과 같습니다:

<Route path="/" component={} />

path는 특정 경로(path) 이고 component는 컴포넌트 user가 언제 해당 경로를 탐색해야 하는지 확인해야 합니다.

예를 들면 다음과 같습니다.

//index.js
const routes = (
  <Router>
    <div>
      <Route exact path="/" component={App} />
      <Route path="/users" component={Users} />
      <Route path="/about" component={About} />
    </div>
  </Router>
)

App에서 ‘exact’ 경로를 사용해야 합니다. exact prop은 요청된 경로가 정확히 있는지 여부를 정의하는데 사용하기 때문입니다.

Link는 무엇인가요?

Link는 사용자가 애플리케이션을 탐색할 수 있는 기본 방법입니다. 네비게이션바에 정보를 넣고 네비게이션 바에서 정보를 클릭하면 페이지를 새로 고치지 않아도 정보 페이지로 리디렉션(redirect) 됩니다. URL은 변경되기도 합니다. 우리의 앱을 위해 우리도 할수 있습니다:

//index.js
const routes = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Route exact path="/" component={App} />
      <Route path="/users" component={Users} />
      <Route path="/about" component={About} />
    </div>
  </Router>
)

각 Link는 글 머리 기호(bullet point), 밑줄 및 클릭 가능(clickable) 링크가 되어 클릭 할 때 경로로 연결합니다.

Unkown/404 컴포넌트도 만들수 있습니다.

import React from 'react'
const UnknownPage = () => <h1>404: Page not Found</h1>
export default UnknownPage

이제 이것을 쓸 수 있습니다.

//index.js
const routes = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/users" component={Users} />
        <Route path="/about" component={About} />
        <Route component={UnknownPage} />
      </Switch>
    </div>
  </Router>
)

각 컴포넌트를 렌더링하여 사용할 수 없는 경우 Unknown 페이지로 이동합니다.

우리의 마지막 index.js 페이지는 다음과 같습니다:

//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router, Switch } from 'react-router-dom'
import App from './App'
import Users from './users'
import About from './about'
import Notfound from './notfound'
const routing = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/users" component={Users} />
        <Route path="/about" component={About} />
        <Route component={Notfound} />
      </Switch>
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

이 포스트가 도움이 되었길 바랍니다! 아래에 질문이나 의견을 남겨주세요 :)