React Router

Achievement Goals

• React에서 npm으로 React Router DOM을 설치(npm install react-router-dom)하고 이용할 수 있다.
• React Router DOM를 이용하여 SPA를 구현할 수 있다.
• 라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다.

라우팅은 무엇인가?

• 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)
  

• React 내부에는 라우팅을 할수있는 내장기능은 없습니다. 그래서 React Router 라는 라이브러리를 설치하고 사용해야 합니다.

ReactRouter 주요 컴포넌트

• BrowserRouter: 라우터 역할
• Switch 와 Route: 경로를 매칭
• Link: 경로를 변경
  

React Router 설치

• simpleroute 폴더에 React App 설치

$ npx create-react-app simpleroute
$ cd simpleroute

• react-router 라이브러리 설치

$ npm install react-router-dom

React import

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

React Router 환경 설정

• 라우트 준비하기

// Home 컴포넌트
function Home() {
  return <h1>Home</h1>;
}

// MyPage 컴포넌트
function MyPage() {
  return <h1>MyPage</h1>;
}

// Dashboard 컴포넌트
function Dashboard() {
  return <h1>Dashboard</h1>;
}

• 메뉴 만들기

function App () {
  return (
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
             MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
      </div>
  )
}

export default App;

• <BrowserRouter> 로 <Route> 컴포넌트를 이용하기 위한 환경을 세팅합니다.

function App () {
  return (
{/* Route 를 사용하기 위한 설정을 진행합니다 */}
   <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
      </div>
   </BrowserRouter>
  )
}

export default App;

• <Switch> 와 <Route> 로 주소 경로와 아까 만든 3개의 컴포넌트를 연결해줍니다.
<Route>의 path 속성을 이용하여 경로를 작성합니다. <Route> 태그 안에 연결하고자 하는 컴포넌트를 넣어줍니다.

function App () {
  return (
   <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>

    {/* 주소경로와 우리가 아까 만든 3개의 컴포넌트를 연결해줍니다. */}
      <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about"> {/* 경로를 설정하고 */}
            <MyPage /> {/* 컴포넌트를 연결합니다. */}
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
   </BrowserRouter>
  )
}

export default App;

• <Link> 의 to 속성을 활용하여 Route 컴포넌트에 설정해준 path 주소를 연결해줍니다.

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/about">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <MyPage />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

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

function MyPage() {
  return <h1>MyPage</h1>;
}

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

export default App;

출처 : 코드스테이츠