02 - 15 일지

오전, 오후 - 과제 기능 마무리

특이사항

 

페이지 구분하는 부분이 꽤나 어려웠다. router를 사용하는 것인데, app.js에 있는 내용은 무조건 출력되는 것을 몰라 꽤나 고생한 것이다.

 

리액트 router DOM

페이지를 구성할 수 있게 해주는 패키지이다. 설치법은 yarn add react-router-dom으로 설치한다. 그 다음 src 폴더에 page폴더를 만들고 그 안에 page.js 파일들을 생성한다. 이것들은 컴포넌트와 비슷한데, 현재 라우터에 맞는 페이지를 출력하기 위한 구성품들이다.

다음에는 shared 폴더를 만들고 그 안에 router.js 파일을 생성한다. 이 안에 page 폴더에 있는 page.js 파일들을 임포트한다. 

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Test from "../pages/Test";
import Work from "../pages/Work";
import Main from "../pages/Main";
import Sangsae from "../pages/Sangsae";
 
// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는, 
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
const Router = () => {
    return (
        <BrowserRouter>
            <Routes>
        <Route path="/" element={<Main />} />
        <Route path="test" element={<Test />} />
        <Route path="work" element={<Work />} />
        <Route path="sangsae/:id" element={<Sangsae />} />
        
            </Routes>
        </BrowserRouter>
    );
};
 
export default Router;