(1-6) React 기초 - React Router

 

SPA & Routing

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

 

 

 

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

 

 

 

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

 

 

 

하지만 React 자체에는 이 기능이 내장되어 있지 않다. 우리가 직접 주소마다 다른 뷰를 보여줘야 한다. React SPA에서는 라우팅을 위해 React Router 라는 라이브러리를 가장 많이 사용한다.

 

React Router 활용

React Router의 주요 컴포넌트에 대해 알아보자.

 

 

 

React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다. 라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Switch 와 Route, 그리고 경로를 변경하는 역할을 하는 Link이다. 이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 한다. 다음 명령어를 통해 사용할 수 있다.

 

 

mport는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용할 수 있다. 본격적으로 해당 컴포넌트들을 이용해서 라우팅해보자.

 

 

 

React Intro에서 배운 create-react-app으로 React 프로젝트 환경을 만들 수 있다. 그 환경에 React Router 라이브러리도 설치할 수 있다. npm 명령어를 통해 간단하게 설치할 수 있다.

 

 

 

컴포넌트를 꺼내 오기 위한 import 구문도 작성해보자.

 

 

 

다음과 같이 코드를 작성하면 어떻게 나올까?

 

 

 

 

위와 같은 페이지가 만들어 지는 것을 과정별로 나눠서 보도록 해보자.

 

1. 개발 환경 구축하기

터미널을 열고 다음 명령어를 실행하여 simpleroute 디렉토리에 React 프로젝트를 생성한다. 실행 후 npm start를 통해 실행 결과가 잘 나오는지 확인해보자.

npx create-react-app simpleroute
cd simpleroute
npm start

 

Create React App 프로젝트가 잘 생성되었다면 이제 React Router DOM을 설치할 차례이다. 아래 명령어를 실행해보자.

npm install react-router-dom

 

이제 이 라이브러리가 잘 설치되었는지 확인해보자. package.json으로 들어가서 package.json 의 dependencies 에 react-router-dom 이라는 라이브러리가 등록된 것을 확인할 수 있다.

이제 App.js 파일로 가서 최상단에 react-router 라이브러리가 제공하는 컴포넌트들을 사용하기 위한 세팅을 진행해보자. 

import React from 'react'
import { BrowserRouter, Route, Switch, Link } from "react-router-dom"; // 이 구문을 넣어주세요

 

React Router DOM을 사용하여 SPA를 구현하기 위한 모든 준비가 완료되었다. 본격적으로 라우트 컴포넌트를 만들어보자.

 

 

2. 라우트 준비하기

페이지를 표시하는 컴포넌트 Home, MyPage, Dashboard를 만들어보자. App.js 하단에 아래와 같이 작성해보자.

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

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

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

 

 

3. 메뉴 만들기

페이지를 표시하는 컴포넌트를 만들었고 각 컴포넌트로 이동할 메뉴를 제작할 것이다. 메뉴 제작을 위해 <ul> 태그와 <li> 태그를 이용한다.

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

export default App;

 

 

4. 주소에 따라 페이지 뷰 다르게 만들기

• 이제 위에서 만든 3개의 컴포넌트를 "주소"에 따라 다르게 만들 것이다.
  • Home 페이지의 주소 "/"
  • MyPage 페이지의 주소 "/mypage"
  • Dashboard 페이지의 주소 "/dashboard"
• App.js 에 라우팅을 하기 위한 React Router DOM 주요 컴포넌트를 세팅한다. 이 컴포넌트를 이용해서 우리가 원하는 "주소에 따른 다른 페이지"를 구현할 수 있다. 앞선 슬라이드에서 학습한 개념들을 간단히 정리해 보겠다.

 

 

BrowserRouter

BrowserRouter는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해준다. 아래와 같이 ReactDOM의 렌더 단계인 index.js 에 넣어서 활용할 수도 있다. BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용할 수 있다.

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));

 

 

Switch, Route

경로를 매칭해주는 역할을 하는 컴포넌트이다.

• <Switch> 컴포넌트는 여러 <Route>를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 한다. <Switch> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
• <Route> 컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정한다. 아래에서 배울 Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동된다.

 

Link

경로를 연결해주는 역할을 하는 컴포넌트이다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API 를 이용해 페이지의 주소만 변경해준다.

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

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

 

 

<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;

 

 

1. Home 컴포넌트 Route 에만 존재하는 exact 라는 것을 보았는데, 언제 쓰는것일까? React router의 특성상 exact속성이 없으면 해당 경로(예시의 "/")로 시작하는 중복된 <Route> 컴포넌트를 모두 보여준다. exact는 주어진 경로와 정확히 일치해야만 설정한 <Route> 컴포넌트를 보여주는 역할을 한다.

[표] exact 속성의 유무에 따른 라우팅 분기

 

 

2. exact 속성을 쓰지 않고도 페이지가 전환되는 것을 봤다. 왜 그런것일까? <Switch> 를 사용하여 exact 역할을 대신 해주는 경우이다. 하지만 <Switch>는 순서와 위치가 중요하다. 위에서 아래로 경로를 하나씩 검사하면서 해당 경로에 해당하는 라우트를 실행시키기 때문이다. 이런 경우, 비교할 라우트를 더 상단에 작성해야 한다. 하지만 만약 위의 예제처럼 Home을 위에 둔 상태에서 exact없이 활용한다면 어떻게 될까? 중복되는 경로로 인해 다른 라우트로의 이동이 불가능한 것을 확인하실 수 있다. 이를 해결하는 방법으로 exact를 사용할 수 있다.

 

 

<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;

 

 

이제 npm run start 를 통해 실제로 Create React App 프로젝트 환경에서 React Router DOM을 통해 SPA가 구현되었는지 확인해 보자.