[React] 리액트 - React Router를 사용하여 헤더 푸터 고정하기(BrowserRouter, Routes, Route)

BrowserRouter, Routes, Route는 react-router-dom 라이브러리의 주요 컴포넌트로, React 애플리케이션에서 클라이언트 사이드 라우팅을 쉽게 구현할 수 있도록 도와준다.

쉽고 심플한 코드로 헤더와 푸터를 고정해보자.

1. BrowserRouter, Routes, Route

1-1. BrowserRouter

BrowserRouter는 HTML5의 History API를 사용하여 UI를 업데이트하고 URL을 동기화하는 라우터로
애플리케이션의 최상위 컴포넌트로 감싸져야 하며,
이를 통해 하위 컴포넌트들이 라우팅 기능을 사용할 수 있게 된다.

import { BrowserRouter as Router } from 'react-router-dom';

const App = () => (
  <Router>
    {/* 라우팅 관련 컴포넌트들 */}
  </Router>
);

 

1-2. Routes

Routes는 라우트 매칭을 관리하는 컴포넌트이다..
여러 개의 Route 컴포넌트를 자식으로 가지며,
현재 URL과 일치하는 Route를 찾아 해당 컴포넌트를 렌더링한다.

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

const App = () => (
  <Router>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </Router>
);

 

1-3. Route

Route는 특정 경로(path)와 해당 경로에 매칭되는 컴포넌트(element)를 정의하는 컴포넌트이다.
URL이 지정된 경로와 일치하면 해당 컴포넌트가 렌더링된다.

• path: 라우트 경로를 지정한다. 예를 들어, /는 루트 경로, /about은 About 페이지 경로
• element: 경로가 매칭될 때 렌더링할 컴포넌트를 지정

import { Route } from 'react-router-dom';

const App = () => (
  <Router>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </Router>
);

 

2. Router로 헤더 푸터 고정하기

2-1. 패키지 설치

npm install react-router-dom

 

2-2. Header, Footer  컴포넌트 작성

// Header.js
import React from 'react';
import './Header.css';

const Header = () => {
  return (
    <header className="header">
      <h1>Header</h1>
    </header>
  );
};

export default Header;

// Footer.js
import React from 'react';
import './Footer.css';

const Footer = () => {
  return (
    <footer className="footer">
      <p>Footer</p>
    </footer>
  );
};

export default Footer;

 

2-3. 각 페이지 컴포넌트 작성

헤더와 푸터 사이의 콘텐츠 페이지를 여러개 작성한다.

// Home.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h2>Home Page</h2>
      <p>Welcome to the home page!</p>
    </div>
  );
};

export default Home;

// About.js
import React from 'react';

const About = () => {
  return (
    <div>
      <h2>About Page</h2>
      <p>This is the about page.</p>
    </div>
  );
};

export default About;

 

2-4. App 컴포넌트에 BrowserRouter 추가

react-router-dom의 BrowserRouter, Routes, Route를 사용하여 라우팅을 설정.

// App.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Header from './layout/Header';
import Footer from './layout/Footer';
import Home from './pages/Home';
import About from './pages/About';
import './App.css';

const App = () => {
  return (
    <div className="app">
      <Header />
      <main className="content">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </main>
      <Footer />
    </div>
  );
};

export default App;

 

2-5. index.js에 BrowserRouter 추가

import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>   
      <App />    
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

2-6. 각 컴포넌트의 css를 설정하여 헤더와 푸터를 고정

/* Header.css */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Footer.css */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* App.css */
.app {
  padding-top: 60px; /* Header 높이만큼 패딩 추가 */
  padding-bottom: 40px; /* Footer 높이만큼 패딩 추가 */
}

.content {
  padding: 20px;
}

 

3. 실행화면

3-1.  Home 메뉴 클릭 시

 

3-2. About 메뉴 클릭 시