[React] 웹 빠르게 개발하기(1) - Router로 Paging 구현하기

 

React 프로젝트를 여러 개 해보면서 깨달았다. 

시작이 어렵지 기능 구현 단계로 가면 오히려 진행이 빠르다. 

 

프로젝트를 시작하는 나만의 방법을 정리해보겠다.

이 포스팅은 빠르게 앱을 개발하는 것을 목표로 한다.  

일단 리액트 프로젝트 앱을 만들었다면 이제 들어갈 준비가 됐다.  

---

 

React Router 페이징 구현 설계

1) 파일 구조 만들기

원하는 페이지와 기능을 고려하여 파일을 구조를 만든다.

- 보통 나는 components, pages를 우선적으로 만든다. 

front-end/
├── src/
│   ├── components/       # 재사용 가능한 컴포넌트
│   │
│   ├── pages/            # 각 페이지별 컴포넌트
│   │   ├── Search.js
│   │   └── ..
│   │
│   ├── App.js            # 메인 애플리케이션 컴포넌트
│   ├── index.js          # 엔트리 포인트, 루트 컴포넌트를 렌더링
│   └── routes.js         # 라우팅 설정 파일 (선택적)
│
└── package.json

 

 

2) React Router 설치

npm install react-router-dom@6

 

최신 버전의 dom을 설치한다. 

설치가 완료되었다면 준비가 끝났다. 

 

 

3) Paging 구현해보자.

(1) App.js

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

function App() {
  return (
    <Router>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/search" element={<Search />} />
      </Routes>
      <Footer />
    </Router>
  );
}

export default App;

 

(2) components > Header.js

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

function Header() {
  return (
    <header>
      <nav>
        <ul>
        <li><Link to="/">Home</Link></li>
          <li><Link to="/search">Search</Link></li>
        </ul>
      </nav>
    </header>
  );
}

export default Header;

 

(3) pages > home.js

import React from 'react';

function Home() {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      <p>This is the Home page of our React application.</p>
    </div>
  );
}

export default Home;

 

 

자, 이제 잘 구현됐는지 확인해보자. 

npm run!

 

뚝딱. 쉽죠잉?

 

url, header 모두 페이지 이동을 자유롭게 할 수 있다. 

 

다음 포스팅에서는 styled-components으로 빠르게 Header를 만드는 법을 정리하겠다.