[React] Routing (2) Router 설치 및 사용방법 완벽 정리

 

Router를 설치하는 방법과 사용 방법을 알아보자!

 

 

---

 

 

 

 이 게시글을 보기 전에 봐야하는 게시글들 

 

 

 1. 개발환경: CRA  

(개발 환경 설정은 아래의 게시글을 참고해주세요!)

https://dev-ini.tistory.com/83

[CRA] CRA(Create React App)로 리액트 프로젝트 만들기

 

 

 2. Router의 개념 

(SPA와 CSR에 대한 설명이 있으니 원활한 이해를 위해서 꼭 보고 오시길 바랍니다!)

https://dev-ini.tistory.com/81

[React] Routing (1) 개념, SPA & CSR

 

 

 

---

 

 

*React Router 공식 홈페이지 (참고용)

https://reactrouter.com/en/main

 

 

 0. Router 설치 

 

터미널에 명령어를 써서 router를 설치한다.

npm i react-router-dom@6

 

 

pakage.json에 들어가서 잘 설치되었는지 확인한다.

 

 

 

 1. App.js와 App.css에서 불필요한 내용들을 삭제하고 최소한의 내용만 추가해둔다. 

 

 App.js 

import './App.css';

function App() {
  return (
    <div className="App">
      <h2>App.js</h2>
      
    </div>
  );
}

export default App;

 

 

 App.css 

.App{
  padding: 20px;
}

 

 

 

 

 2. src/pages 폴더 안에 필요한 페이지(파일)들을 만든다. 

 

 

 

 Home.js 

const Home = () => {
  return <div>
    <h1>Home</h1>
    <p>이곳은 홈입니다.</p>
  </div>
}

export default Home;

 

 

 New.js 

const New = () => {
  return <div>
    <h1>New</h1>
    <p>이곳은 일기 작성 페이지입니다.</p>
  </div>
}

export default New;

 

 

 Edit.js 

const Edit = () => {
  return <div>
    <h1>Edit</h1>
    <p>이곳은 일기 수정 페이지입니다.</p>
  </div>
}

export default Edit;

 

 

 Diary.js 

const Diary = () => {
  return <div>
    <h1>Diary</h1>
    <p>이곳은 일기 상세 페이지입니다.</p>
  </div>
}

export default Diary;

 

 

 

 3. <BrowserRouter> 컴포넌트를 import해서 사용하기 

 

(1) <BrowserRouter>를 import한다.

(2) 브라우저의 url과 앱을 연결하는 기능을 하는 <BrowserRouter> 컴포넌트로 App 컴포넌트가 return하는 부분을 감싸준다. 

 

import "./App.css";
import { BrowserRouter } from "react-router-dom"; // BrowserRouter를 import한다.

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

 

 

 4. 4개의 페이지 컴포넌트들을 import 한다. 

 

import "./App.css";
import { BrowserRouter } from "react-router-dom";
import Home from './pages/Home'
import New from './pages/New'
import Edit from './pages/Edit'
import Diary from './pages/Diary'

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

 

 

 5. <Routes> 컴포넌트를 import해서 사용하기 

 

브라우저의 url이 바뀌게 되면 어떤 컴포넌트를 렌더링해서 페이지 역할을 하게 할 것인지 결정하기 위해서 바뀔 부분을 <Routes> 컴포넌트로 감싸준다.

 

import "./App.css";
import { BrowserRouter, Routes } from "react-router-dom"; // Routes를 import한다.
import Home from './pages/Home'
import New from './pages/New'
import Edit from './pages/Edit'
import Diary from './pages/Diary'

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

 

 

 6. <Route> 컴포넌트를 import해서 사용하기 

 

<Route> 컴포넌트는 실질적으로 url 경로와 컴포넌트를 맵핑시켜준다.

path와 element를 작성하기 → "path가 index를 가리키고 있으면, <Home>컴포넌트를 렌더링해라."

url 경로가 "/" (아무것도 없는거랑 똑같은 경로)이기 때문에, Route.Provider가 전달받은 <Home> 컴포넌트를 url을 맵핑시켜서 정상적으로 렌더링한다.

 

import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from './pages/Home'
import New from './pages/New'
import Edit from './pages/Edit'
import Diary from './pages/Diary'

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path='/' element={<Home />}/>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

 

 

 

 

 7. /new 경로 추가해보기 

 

import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from './pages/Home'
import New from './pages/New'
import Edit from './pages/Edit'
import Diary from './pages/Diary'

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path='/' element={<Home />}/>
          <Route path='/new' element={<New />}/>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

http://localhost:3000/new 로 주소창에 입력해본다.

 

여기서 <h2>App.js</h2>가 노출되는 이유는,

페이지가 바뀔 때 변화하는 부분은 <Routes>안에 있는 부분만 변화하게 설계했기 때문에 바깥 쪽 부분은 그대로 유지가 되기 때문이다.

 

 

즉, 페이지가 바뀌어도 항상 보여져야되는 요소를 작성해야한다면 <Routes> 컴포넌트 바깥쪽으로 빼서 작성을 하면된다. (바깥 쪽에 빼서 작성한 것은 어떤 페이지에서도 다 나타나게끔 할 수 있는 것이다. 예를들어 헤더나 푸터 같은 것들)

 

 

 

 8. 나머지 페이지들도 경로 추가하기 

 

import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from './pages/Home'
import New from './pages/New'
import Edit from './pages/Edit'
import Diary from './pages/Diary'

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path='/' element={<Home />}/>
          <Route path='/new' element={<New />}/>
          <Route path='/edit' element={<Edit />}/>
          <Route path='/diary' element={<Diary/>}/>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

 

 

 

 9. 페이지들을 이동시키는 요소 만들기 

 

<a>태그로 이동시키는 것은 MPA(Multi Page Application)의 특징인데, 이러면 SPA(Single Page Application)의 빠른 이동(쾌적한 사용자 경험)을 사용할 수 없게 되는 문제가 발생한다.

<a>태그로 페이지 이동을 해야하는 경우는 외부로 나가게되는 url 사용할때만 사용하기!

 

 

 <a> 태그를 사용한 예제 (MPA 방식→사용 ㄴㄴ) 

 

import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from './pages/Home'
import New from './pages/New'
import Edit from './pages/Edit'
import Diary from './pages/Diary'

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path='/' element={<Home />}/>
          <Route path='/new' element={<New />}/>
          <Route path='/edit' element={<Edit />}/>
          <Route path='/diary' element={<Diary/>}/>
        </Routes>
        <a href= {"/new"}>NEW로 이동</a>
       </div>
    </BrowserRouter>
  );
}

export default App;

 

 

 

 

예제로 컴포넌트를 생성해보기 (SPA 방식으로 페이지 이동시키는 컴포넌트)

 

 

 src/components/RouteTest.js 

const RouteTest = () => {
  return <></>
}

export default RouteTest;

 

 

<Link> 컴포넌트를 import한다.

import { Link } from "react-router-dom"; // Link를 import 한다.

const RouteTest = () => {
  return <>
  
  </>
}

export default RouteTest;

 

 

<a> 태그를 이용할때는 href로 경로를 명시했다면, Link 컴포넌트는 to 라는 prop에다가 경로를 전달해줘야한다.

import { Link } from "react-router-dom";

const RouteTest = () => {
  return (
    <>
      <Link to={"/"}>HOME</Link>
      <br />
      <Link to={"/diary"}>DIARY</Link>
      <br />
      <Link to={"/new"}>NEW</Link>
      <br />
      <Link to={"/edit"}>EDIT</Link>
    </>
  );
};

export default RouteTest;

 

 

App.js에서 <RouteTest> 컴포넌트를 import한다.

 App.js 

import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import RouteTest from "./components/RouteTest";
import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/edit" element={<Edit />} />
          <Route path="/diary" element={<Diary />} />
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

export default App;

 

 

 

 10. 결과 

 

 

이런식으로 SPA 방식으로 페이지를 이동시키면, 실제로 페이지를 이동시키는 것이라기보다는 페이지 역할을 하는 컴포넌트를 갈아끼우고 url를 바꿔버려서 마치 페이지를 이동한 것처럼 보이게 만든다.

 

리액트앱이 제공하는 html은 index.html 하나밖에 없지만, 앱컴포넌트와 앱컴포넌트 안에 있는 router들을 통해서 url의 경로별로 렌더링되는 컴포넌트들을 계속해서 변경시킴으로써 페이지를 이동시키는 것이다.

 

결론적으로,  CSR (Client Side Rendering) 방식을 사용하면, 페이지 전환 시 깜박임이 없고 이동속도도 매우 빨라지게되어, 쾌적하게 페이지 이동을 할 수 있게 된다.

 

 

 

Routing의 구체적인 내용과 유용한 기능 사용법은 아래를 참고해주세요! 

 

https://dev-ini.tistory.com/84

[React] Routing (3) Path Variable(useParams), Query String(useSearchParams), Page Moving(useNavigate)