React Router

Samuel .J·2022년 2월 17일
0
post-thumbnail

1. React Router

  • SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않는다.

  • 예를 들어 Twittler 와 같은 SPA 를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요할 수 있다.

  • 이 화면에 따라 "주소"도 달라질 것인데, 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing) 이라고 한다.

2. React Router 활용

React Router 주요 컴포넌트

  • React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다.

  • 라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 SwitchRoute, 그리고 경로를 변경하는 역할을 하는 Link 가 있고, 이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 한다.

  • 이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 불러와야한다.

명령어 사용 방법

import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
  • Import는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용할 수 있다.

React Router 사용 환경

  • React Router를 사용 하려면 몇가지 해야할 것들이 있는데 아래와 같이 설치 한다.
npx create-react-app "프로젝트 이름"
cd "프로젝트 이름"
npm start
  • 설치가 완료되면 React Router DOM을 설치하여야 한다.
npm install react-router-dom@"버전"

위와 같이 설치가 완료되면 package.json에서 확인이 가능하다.

3. 주요 컴포넌트 기능

BrowserRouter

  • BrowserRouter는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해준다.
  • BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용할 수 있다.

Switch, Route

  • 경로를 매칭해주는 역할을 하는 컴포넌트이다.
Switch
  • <Switch> 컴포넌트는 여러 <Route>를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. <Switch> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
Route
  • <Route> 컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정합니다. 아래에서 배울 Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동된다.
  • 경로를 연결해 주는 역할을 하는 컴포넌트입니다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API 를 이용해 페이지의 주소만 변경해 준다.

  • ReactDOM으로 렌더를 시키게 되면 <Link> 컴포넌트는 <a> 태그로 바뀌는 모습을 볼 수 있다.

  • <a>태그를 사용하지 않고 <Link>를 사용하냐면 <a>태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킵니다. 즉, 새로고침 현상이 일어나게 된다.
    하지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현이 가능하다.

4. 컴포넌트를 이용한 코드 구성 예시

  • <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="/mypage"> {/* 경로를 설정하고 */}
            <MyPage /> {/* 컴포넌트를 연결합니다. */}
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
   </BrowserRouter>
  )
}

export default App;
  • 위 코드를 보면 Home 컴포넌트 Route 에만 존재하는 exact라는 것을 볼수 있는데

  • React router의 특성상 exact 속성이 없으면 해당 경로(예시의 "/")로 시작하는 중복된 <Route> 컴포넌트를 모두 보여준다.

  • exact는 주어진 경로와 정확히 일치해야만 설정한 <Route> 컴포넌트를 보여주는 역할을한다.

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

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

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/mypage">
            <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;
profile
기록하는 코린이의 블로그🥸

0개의 댓글