React Router Dom

리액트 라우터 돔이란?

• 리액트는 싱글 페이지 어플리케이션이다. 리액트 라우터 돔으로 멀티 페이지 앱을 만들 수 있다.

• https://reactrouter.com/en/main

• 참고: 넥스트js에서는 라우팅 기능 포함됨. 따라서 cra로 작업할 때에 리액트 라우터 돔 사용

참고 코드: https://github.com/cryptojang/to-do-list-dr/tree/master

1. 리액트 라우터 돔 설치

• 터미널에서 작업할 폴더로 이동한 후 아래와 같이 설치한다.

npm i react-router-dom

2. 페이지 나누기

• 만들 페이지를 파일로 만든다.
• ex. main page : src 폴더 안에 pages/main.jsx
• 페이지를 특수한 컴포넌트로 만듬. 이때 페이지 파일명은 소문자로 만들고, 컴포넌트처럼 틀 만든다.
• 이런 식으로 로그인 페이지 등 쭉 파일 만들어서 src/pages/ 에 저장
  

3. App.jsx 에 페이지 부착시키기

• 모든 페이지의 구조를 최상위 렌더링 페이지인 App.jsx에서 정리한다.
• 우선, 리액트 라우터 돔에서 BrowserRouter, Routes, Route 임포트한 후, BrowserRouter 안에 Routes 안에 Route 로 구조 세운다.

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Main from "./pages/main";
import A from "./pages/a";
import B from "./pages/b";
import C from "./pages/c";


const App = () => {
 return (
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<Main />} />
       <Route path="/a" element={<A />} />
       <Route path="/b" element={<B />} />
       <Route path="/c" element={<C />} />
     </Routes>
   </BrowserRouter>
 );
};


export default App;

• path: 페이지 경로
• element: path에 넣은 경로에서 element에 나온 페이지 띄워준다 뜻
• 브라우저 라우터: 가장 바깥에서 감싸줘야 함.
• routes: 여러 개 존재 가능(localhots/user/a 식으로 가지치기 할 수 있음) -> 근데 라우츠 하나 안에서 /user/a 식으로 경로 설정하는 것도 가능
• route: 하나의 페이지에 대한 내용 적어주는 곳

4. 버튼으로 이동하기 구현:

• 링크 컴포넌트 사용 (미리 만든 연결 버튼): 버튼으로 페이지 이동,뒤로 가기 눌렀을 때 뒤로 가는 기능을 미리 구현해놓음
• 리액트 라우터 돔에는 페이지 이동 컴포넌트 존재

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


const Main = () => {
 return (
   <div className="bg-blue-100 min-h-screen flex flex-col justify-center items-center">
     <div>Main</div>
     <div className="flex gap-8">
       <Link to="/a">a</Link>
       <Link to="/a">b</Link>
       <Link to="/a">c</Link>
     
     </div>
   </div>
 );
};


export default Main;

5. 동적 라우팅.

• id 값에 1,2,3,4, 등 들어올 수 있다
  (http://localhost:3002/user/5 처럼)

• 코인별 소개 페이지 같이 반복적인 거 줄일 수 잇음

<Route path="/user/:id" element={<User />} />