React Emotion Diary - React Router

https://reactrouter.com/

vscode terminal에 지시어 입력 후 설치

정상적으로 설치가 되어있는지 확인

페이지 컴포넌트들의 소스코드들은 pages에 넣어둘것이다

4개의 페이지 생성

App.js

import "./App.css";
// 생성한 4개의 page를 특정 주소에 연결해 page routing을 시킨다
import { BrowserRouter, Route, Routes } from "react-router-dom";

import RouteTest from "./components/RouteTest";

// 현재경로에서/pages 폴더 디렉토리 아래/Home.js를 가져와
import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";

function App() {
  return (
    // BrowserRouter로 감싸져 있는 부분은 브라우저 URL과 mapping 되어 있다
    // Routes => 브라우저의 url이 바뀌게 되면 어떤 컴포넌트를 rendering 해서 그 컴포넌트가 페이지 역할을 하게 할 것인지 결정하기 위해서 바뀔 부분을 Routes라는 컴포넌트로 감싸줌
    // Route => 실질적으로 url 경로와 컴포넌트를 mapping 시켜주는 컴포넌트
    <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;

path가 인덱스(/)를 가르키고 있으면 Home 컴포넌트를 렌더 해라 라는 명령을 내린것 => route proveder가 전달받은 Home 컴포넌트를 wrapping 시켜서 정상적으로 rendering

변화하는 부분은 Routes안에만 변화하도록 설계한것이기 때문에 App.js는 계속 나옴=> Routes 밖에 있는 부분은 계속 나타남

Router.js

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;

page 이동이 일어나지 않고 rerendering이 일어남 => App 컴포넌트와 App 컴포넌트의 Router을 통해서 url의 경로별로 rendering된 컴포넌트들을 계속 해서 변경 시켜줘서 마치 페이지가 이동된것처럼 보이게 만든다

페이지 전환시 깜빡임이 없고 이동속도가 매우 빨라서 쾌적한 페이지 이동이 가능한 csr링 기법

Home.js

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <p>이곳은 Home 입니다</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;

App.css

.App {
  padding: 20px;
}