react-router-dom 라이브러리 사용법

리액트 로고

 리액트, 첫 문을 'react-router-dom' 라이브러리 설명으로 열게 되었다. 아직 딥하게 공부한 것은 아니어서 간단히 소개만 하는 글이 될 것 같다. 'react-router-dom'을 이해하기 위해서는 SPA 개념에 대해서 이해하고 있어야 한다.

SPA

 과거 웹 어플리케이션은 여러 HTML 페이지를 두어 제공하는 형식이었다. 클라이언트에 측에서 URL을 이용하여 서버에 있는 자원을 요청하면, 서버는 요청한 자원이 있는지 확인하고 클라이언트에게 자원 통째로 제공한다. 이런 결과로 클라이언트는 매번 요청 때마다 이전 페이지를 새로 갱신하여 현재 페이지를 확인해야 했다. 지금이야 인터넷 속도가 빨라져서 눈 깜짝할 새에 요청/응답이 진행된다고 하지만, 그렇지 않은 때는 불필요한 갱신 때문에 시간을 써야만 하는 불편함이 따랐다.

 SPA는 Single Page Application의 약자이다. DOM의 보급으로 웹 페이지에 있는 요소들을 JavaScript를 통해 접근이 가능해졌다. JavaScript를 이용하여 전체 페이지가 아닌 필요한 부분만 요청을 하여 화면에 띄우는 기술을 만들어냈다. 이제 클라이언트는 한 웹페이지에서 사용하려하는 기능을 이용할 수 있게 된 것이다.

 

react-router-dom

 기본적으로 React는 SPA를 위한 개발환경을 제공한다. 기본 React 프레임워크는 URL을 통한 Router가 제공이 안된다. Router는 웹개발의 개념으로 정리하면, 요청된 URL에 대한 서버의 자원이 있는지를 관리하는 관리자라고 생각하면 된다. 하지만 웹의 작동방식은 여전히 URL이 기본이다. URL 변경에 의한 SPA의 상태 변경을 쉽게 관리하기 위해서 Router가 필요하다.

 

> react-router-dom 패키지 설치법

npm install react-router-dom

BrowserRouter, Routes-Route , Link

 위에서 언급한 3개의 react-router-dom 컴포넌트를 조합해서 써야 한다.

 BrowserRouter는 변경되는 URL을 렌더링 요청을 하는 요소다.(차후 공부하여 다시 정리하겠다.)

 Routes-Route는 URL 주소에 의하여 어떤 컴포넌트를 렌더링할 지를 관리하는 요소다.

 Link는 HTML의 <a> 태그의 역할을 하는 요소다.

// 다른 import 요소는 생략
import {BrowserRouter, Router, Route, Link};

const App = () => {
  return (
    <BrowserRouter>
        <NavLink to="/a">to a</NavLink>
        <NavLink to="/b">to b</NavLink>
        <NavLink to="/c">to c</NavLink>
        <Routes>
          <Route path="/a" element={<p>Hello</p>}></Route>
          <Route path="/b" element={<p>World</p>}></Route>
          <Route path="/c" element={<p>Today</p>}></Route>
        </Routes>      
    <BrowserRouter>
  );
};

 BrowserRouter는 Routes-Route가 있는 구간을 꼭 감싸주자. NavLink도 안에 있어야 하는지는 아직 확인이 안되었다.  NavLink 같은 경우는 렌더링 되면 <a>태그로 변경된다. 각각의 link를 클릭해주면 'to' 프로퍼티에 적혀 있는 url 주소와 Route의 'path' 프로퍼티에 적혀 있는 url 주소와 일치하는 것을 찾아 엘리먼트를 렌더링하게 된다.