[React] react-router-dom

Intro

react를 이용하여 웹화면을 만드는 연습을 하면서 react-router-dom 패키지를 접하게 되었다.

아래의 세개의 패키지 용도는 각각 다르다.

react-router 웹 & 앱
react-router-dom 웹
react-router-native 앱

패키지 설치를 위해 아래의 명령어를 사용하면 된다.

npm install react-router-dom
npm install react-router-dom@5 // 특정 버전 다운받고 싶을 때

완료되면 App.js에 아래와 같이 처음부분에 추가해주면 된다 😋😋

import React from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

• BrowserRouter - history API를 사용해 URL과 UI를 동기화하는 라우터
• Route - 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링
• Link -'a' 태그과 비슷하게 to 속성에 설정된 링크로 이동. 기록이 history스택에 저장이 됨
• Switch - 자식 컴포넌트 Route 또는 Redirect 중 매치되는 첫 번째 요소를 렌더링.
  Switch를 사용하면 BrowerRouter만 사용할 때와 다르게 하나의 매칭되는 요소만 렌더링 하는 점을 보장

Main

react router dom 사이트를 들어가 코드를 참고할 수 있다.
📍 https://v5.reactrouter.com/web/guides/quick-start
사이트에 들어가 web -> basic 메뉴를 들어가면 예시 코드가 나온다.

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

export default function Example() {
  return (
    <Router> // 렌더링부분의 모든 태그를 BrowserRouter가 감싸고 있음
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link> //클릭시 이동하는 url 지정
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch> //Route 요소들 중 매치되는 url을 렌더링, 만약 Route가 중복되면 첫번째 요소만 렌더링
          <Route path="/about"> 
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

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

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

function Dashboard() {
  return <h2>Dashboard</h2>;
}

위의 Switch 태그 안을 아래와 같이 깔끔하게 수정할 수 있다.

  <Switch> //Route 태그의 path는 매칭을 기다리는 url이며, 매칭되면 component를 렌더링 함
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/dashboard" component={Dashboard} />
  </Switch>

Result

👀 client 단에서 npm run start 시 화면

참고

https://velog.io/@kwonh/React-react-router-dom-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0