리액트(React) - react-router-dom

설치 명령어

$ npm install react-router-dom

라우팅(routing) : 사용자가 어떤 주소로 들어왔을 때 해당하는 적당한 페이지를 사용자에게 보내주는 것입니다.

 

Router
Router는 React 애플리케이션에서 SPA(Single Page Application)네비게이션을 쉽게 구현하기 위한 라이브러리입니다.

import { BrowserRouter, Route, Routes } from 'react-router-dom'

BrowerRouter는 리액트 라우터의 도움을 받고 싶은 컴포넌트의 최상위 컴포넌트를 감싸는 래퍼 컴포넌트입니다. 

Routes : 이 컴포넌트는 'Route' 컴포넌트의 컨테이너 역할을 합니다.

Route : 각각의 라우트를 정의하는 컴포넌트입니다. 어떤 경로에 어떤 React 컴포넌트를 렌더링 할지를 지정합니다. 'path' prop은 URL 패턴을 'element' prop은 렌더링할 컴포넌트를 지정합니다.

 

import React from 'react'
import { BrowserRouter, Routes, Route } from "react-router-dom";

const HOME = () => {
  return(
    <div>
      <h2>HOME</h2>
      HOME...
    </div>
  )
}

const Topics = () => {
  return(
    <div>
      <h2>Topics</h2>
      Topics...
    </div>
  )
}
const Contact = () => {
  return(
    <div>
      <h2>Contact</h2>
      Contact...
    </div>
  )
}


const App = () => {
  return (
    <div>
      <h1>Hello React Router DOM</h1>
      <ul>
        <li><a href='/'>HOME</a></li>
        <li><a href='/topic'>Topics</a></li>
        <li><a href='/contact'>Contact</a></li>
      </ul>
      <Routes>
        <Route path='/' element={<HOME />}/>
        <Route path='/topic' element={<Topics />}/>
        <Route path='/contact' element={<Contact />}/>
      </Routes>
    </div>
  )
}

export default App

 

이제 URL이 달라지면 path가 일치하는 컴포넌트가 렌더링됩니다. 사용자가 이 웹사이트에 아무런 path도 지정하지 않고 들어왔을 때는 홈 컴포넌트를 사용자에게 보여주고, 사용자가 /topics라는 URL로 들어오면 Topics컴포넌트를 보여주고 싶습니다. 그리고 /contact 주소로 들어오면 Contact 컴포넌트를 사용자에게 라우팅합니다.

 

Link

단일 페이지 애플리케이션(Single Page Application)을 만들 때 중요한 점은 페이지가 리로드되지 않고 동적으로 가져오는 데이터는 코드를 작성해서 만들거나 Ajax 같은 기술을 이용해 비동기적으로 데이터를 가져와서 페이지를 만드는 것입니다.

 

Link 컴포넌트는 페이지가 리로드되지 않게 자동으로 구현하는 컴포넌트입니다.

 

코드가 길어지기 때문에 컴포넌트를 만들어서 하겠습니다.

 

import React from 'react'
import Contact from "./components/Contact";
import HOME from "./components/HOME";
import Topics from "./components/Topics";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";


const App = () => {
  return (
    <div>
      <h1>Hello React Router DOM</h1>
      <ul>
        <li><Link to='/'>HOME</Link></li>
        <li><Link to='/topic'>Topics</Link></li>
        <li><Link to='/contact'>Contact</Link></li>
      </ul>
      <Routes>
        <Route path='/' element={<HOME />}/>
        <Route path='/topic' element={<Topics />}/>
        <Route path='/contact' element={<Contact />}/>
      </Routes>
    </div>
  )
}

export default App

 

상단의 링크를 클릭하면 페이지가 리로드되지는 않지만 이것이 제대로 동작하려면 애플리케이션의 웹 서버 설정이 사용자가 어떤 패스로 들어와도 동일한 웹 페이지를 서비스할 수 있어야 합니다. 그렇게 되지 않는 경우에는 난처한 일이 생길 수가 있습니다. 그런 경우를 위해 준비한 Router가 HashRouter입니다. 지금까지 사용했던 BrowsserRouter를 모두 HashRouter로 변경하고 결과를 확인해보세요.

 

 

주소창이 어떻게 바뀌는지 보면 BrowserRouter를 사용했을 때와는 다르게 URL에 #가 끼어들어 간 것을 볼 수 있습니다. #가 붙어있으면 뒤읭 내용은 북마크라는 뜻입니다. 웹 서버는 # 문자 뒷부분의 주소를 무시합니다. 하지만 자바스크립트를 이용해 # 뒷부분의 내용을 알 수 있기 때무에 react-router-dom은 URL을 읽어서 적절한 컴포넌트롤 라우팅해 줄 수 있습니다. 하지만 #가 들어가기 때문에 깔끔하지는 않아 보입니다. 웹 서버 설정에 따라 어떤 패스로 들어오든 루트 페이지에 있는 HTML 파일을 서비스할 수 있다면 BrowserRouter를 사용하고, 그렇지 않다면 HashRouter를 사용하면 됩니다.

 

NavLink

NavLink는 Link와 유사한데 기능이 조금 더 부가된 것이라고 보면 됩니다. 결과를 보면 똑같이 보이지만 크롬 개발자 도구로 해당 요소를 보면 다른 부분을 확인할 수 있습니다. Link 컴포넌트를 사용했을 때와는 달리 class="active"라는 속성이 생겼습니다.

class="active" 속성을 이용하면 무엇을 할 수 있을까요? 사용자가 현재 자신이 어떤 페이지에 위치하고 있는지 직관적으로 알 수 있게 내비게이션에 사용자가 위치한 곳을 표시해줄 수 있습니다.

 

useParams

import React from 'react'
import Contact from "./components/Contact";
import HOME from "./components/HOME";
import Topics from "./components/Topics";
import { BrowserRouter, Routes, Route, Link, NavLink } from "react-router-dom";


const App = () => {
  return (
    <div>
      <h1>Hello React Router DOM</h1>
      <ul>
        <li><NavLink to='/'>HOME</NavLink></li>
        <li><NavLink to='/topic/:userId'>Topics</NavLink></li>
        <li><NavLink to='/contact'>Contact</NavLink></li>
      </ul>
      <Routes>
        <Route path='/' element={<HOME />}/>
        <Route path='/topic/:userId' element={<Topics />}/>
        <Route path='/contact' element={<Contact />}/>
      </Routes>
    </div>
  )
}

export default App

import React from 'react'
import { useParams  } from "react-router-dom";

const Topics = () => {
    const { userId } = useParams();
    // useParams 훅을 사용하여 URL 매개변수 값을 가져옵니다.
    console.log(userId);
  return (
    <div>
        <h1>UseParams</h1>
        <p>User ID : {userId}</p>
    </div>
  )
}

export default Topics

useParams는 React Router에서 제공하는 훅 중 하나로, 현재 경로의 URL 매개변수를 가져올 수 있게 해줍니다. 그 값에 따라 동적으로 동작하는 페이지를 만들면 됩니다.

 

우리가 만든 애플리케이션은 자바스크립트로 동적으로 만들어지는 애플리케이션이기 때문에 검색엔지과 같은 로봇들은 정적인  HTML이 없으면 이것을 처리할 수가 없거나 처리하기가 어렵습니다 이를 위해 서버 사이드 렌더링이라는 기술을 이용하면 여러분이 만들 웹 페이지를 서버 쪽에서 Node.js같은 기술로 생성해서 최종적으로 정적인 HTML로 만듭니다. 그러면 이를 검색엔진에서 사용할 수 있습니다.