React Naviation 추가하는 방법

React 프로젝트에 네비게이션 바 추가하기: 고도화된 가이드

React를 활용한 ⚙️ SPA(Single Page Application) 구축은 개발자들 사이에서 인기를 끌고 있습니다. 특히 네비게이션 바는 앱 내에서 사용자가 다른 페이지로 손쉽게 이동할 수 있게 하는 핵심 요소입니다. 본 문서는 React 프로젝트에 네비게이션 바를 전역적으로 통합하는 방법을 단계별로 설명합니다.

기술 정의

• 전역 라우팅의 이해: App.tsx에서 BrowserRouter를 사용해 설정하면, 전체 앱에 걸쳐 단일 페이지 어플리케이션이 구현됩니다. 이는 앱 전체에서 페이지를 전역적으로 렌더링하는 기능을 수행합니다.
• SPA의 매력: React를 통한 SPA 구현은 페이지 로딩 없이 콘텐츠를 동적으로 렌더링할 수 있게 하여 사용자 경험을 크게 향상시킵니다.

원리 및 철학

• React Router의 역할: 클라이언트 사이드 라우팅을 가능하게 하는 React Router는 URL의 변경을 감지하고, 해당 경로에 맞는 컴포넌트를 렌더링하여 SPA에서의 페이지 전환 효과를 제공합니다.
• 싱글 페이지 애플리케이션 (SPA): SPA는 사용자와의 상호작용을 한 페이지 내에서 이루어지게 하는 웹 애플리케이션 또는 웹사이트의 디자인 접근 방식입니다. 이는 필요한 데이터만을 비동기적으로 요청하여 UI를 업데이트합니다.
• React의 철학: 데이터가 변경될 때마다 선언적인 뷰를 통해 적절한 컴포넌트를 효율적으로 업데이트하고 렌더링합니다. 이는 개발자가 애플리케이션 상태 관리에 더 집중할 수 있게 합니다.

설정 방법

1. 의존성 설치

Yarn을 사용하여 필요한 패키지와 TypeScript 타입 정의를 설치합니다.

yarn add react-router-dom
yarn add -D @types/react-router-dom

2. 라우터 설정

App.tsx 파일에 BrowserRouter, Routes, Route를 설정하여 앱 내 라우팅을 구성합니다. 이는 SPA에서의 페이지 전환을 가능하게 합니다.

// App.tsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Settings from './Settings';
import Shortcuts from './Shortcuts';
import Clipboard from './Clipboard';
import NavigationBar from './NavigationBar';

const App: React.FC = () => {
  return (
    <Router>
      <NavigationBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/shortcuts" element={<Shortcuts />} />
        <Route path="/clipboard" element={<Clipboard />} />
      </Routes>
    </Router>
  );
};

export default App;

3. 네비게이션 바 컴포넌트 생성

공통 네비게이션 바 컴포넌트를 생성하고, Link 컴포넌트를 사용하여 다른 페이지로의 링크를 제공합니다.

// NavigationBar.tsx
import React from 'react';
import { Link } from 'react-router-dom';

const NavigationBar: React.FC = () => {
  return (
    <nav>
      <ul>
        <li><Link to="/">홈</Link></li>
        <li><Link to="/settings">설정</Link></li>
        <li><Link to="/shortcuts">단축키 설정</Link></li>
        <li><Link to="/clipboard">클립보드</Link></li>
      </ul>
    </nav>
  );
};

export default NavigationBar;

4. 전역적으로 네비게이션 바 포함시키기

App.tsx에 NavigationBar 컴포넌트를 추가하여 앱의 모든 페이지에서 네비게이션 바에 접근할 수 있게 합니다.

import { Route, Routes } from "react-router-dom";
import Capture from "./ui/Capture";
import Clipboard from "./ui/Clipboard";
import Home from "./ui/Home";
import Settings from "./ui/Settings";
import NavigationBar from "./ui/components/NavigationBar";
function App() {
  return (
    <div className="App">
      <NavigationBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/capture" element={<Capture />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="clipboard" element={<Clipboard />} />
      </Routes>
    </div>
  );
}

export default App;