[React] React Router 사용법

 

 

SPA에서 라우팅은 웹 애플리케이션의 다양한 뷰 및 컴포넌트 간의 네비게이션을 관리하는 중요한 부분이다. SPA는 페이지를 새로고침하지 않고도 동적으로 콘텐츠를 업데이트하므로, 라우팅이 사용자 경험을 향상시키고 전체적인 애플리케이션의 성능을 최적화하는 데 도움이 된다. 페이지 전환 시 기존의 서버에서 HTML를 생성해서 내려줄 때처럼 깜빡하는 느낌이 없이 매끄러운 느낌을 주기 때문에 어플리케이션과 같은 느낌을 준다.

 

1. React에 React Router 적용하기

1) 설치

먼저 아래 명령어로 React Router를 설치한다. 

   npm install react-router-dom

2) 기본 구성

React Router를 사용하려면 앱의 최상위 컴포넌트에서 BrowserRouter를 사용하여 감싸야 한다. 

// App.js

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

// 홈 컴포넌트
const Home = () => (
  <div>
    <h2>홈 페이지</h2>
  </div>
);

// 어바웃 컴포넌트
const About = () => (
  <div>
    <h2>어바웃 페이지</h2>
  </div>
);

// 컨택트 컴포넌트
const Contact = () => (
  <div>
    <h2>컨택트 페이지</h2>
  </div>
);

const App = () => {
  return (
    <Router>
      <div>
        {/* 네비게이션 바 */}
        <nav>
          <ul>
            <li>
              <Link to="/">홈</Link>
            </li>
            <li>
              <Link to="/about">어바웃</Link>
            </li>
            <li>
              <Link to="/contact">컨택트</Link>
            </li>
          </ul>
        </nav>

        {/* 라우트 설정 */}
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
};

export default App;

 

BrowserRouter는 History API를 기반으로 동작한다. 이 API를 사용하여 브라우저의 주소 표시줄을 조작하고, 페이지를 새로고침하지 않고도 URL을 변경할 수 있다. 

History API란?
history 전역 객체를 통해 브라우저 세션 히스토리에 대한 접근을 제공하는 API이다. 
세션 히스토리는 페이지를 이동할 때마다 차곡차곡 쌓이며, 이것을 이용해 뒤로가기 또는 앞으로가기와 같은 이동이 가능한 것이다.
이동외에도 히스토리가 변경됨을 감지 할 수 있고 세션 기록도 변경할 수 있다. 

https://developer.mozilla.org/ko/docs/Web/API/History_API

 

2. Link 컴포넌트로 다른 페이지로 이동하기

   import React from 'react';
   import { Link } from 'react-router-dom';

   function Navigation() {
     return (
       <nav>
         <ul>
           <li><Link to="/">Home</Link></li>
           <li><Link to="/about">About</Link></li>
         </ul>
       </nav>
     );
   }

   export default Navigation;

Link 컴포넌트는 HTML 요소 중 a tag과 유사하게 동작한다. to props에 원하는 경로를 정해주면 해당 하는 페이지가 있다면 그 페이지로 이동시켜준다. a tag 처럼 Link tag를 스타일을 주는 것도 가능하다.

 

3. url Parameter와 Query String

URL 파라미터

• URL 파라미터는 URL 경로 자체에 직접 포함된 변수 또는 키-값 쌍이다.
• 예시: https://example.com/page?param1=value1¶m2=value2
• 이 예에서 param1 및 param2는 URL 파라미터이다.

쿼리 스트링

• 쿼리 스트링은 URL의 일부로 물음표 ?로 시작하며 앰퍼샌드 &로 구분된 하나 이상의 키-값 쌍을 포함한다.
• 예시: https://example.com/page?param1=value1¶m2=value2
• 여기서 ?param1=value1&param2=value2가 쿼리 스트링이다.

주어진 예에서 param1=value1 및 param2=value2는 쿼리 스트링 내의 키-값 쌍이다. 이러한 파라미터들은 일반적으로 서버에 정보를 전송하여 해당 정보를 처리하고 적절한 응답을 받기 위해 사용된다.