14-1 React Router, Model

14-1 React Router, Model

라우트 작성

---

React Router

npm install react-router-dom @types/react-router-dom --save

import { createBrowserRouter } from 'react-router-dom'; // 1. createBrowerRouter - 라우터 기능
import { RouterProvider } from 'react-router-dom'; // 2. 라우터를 렌더할 때 사용

1.
const router = createBrowserRouter([ // 라우터 설정
  {
    path: "/",
    element: <Home />, // /경로로 오면 ---> Home
  },
  {
    path: "/books",
    element: <div>book list</div>
  }
])

~
      2.
      <RouterProvider router = {router} />
      
     

각 경로로 요청이 오면 해당 페이지가 렌더되어 보여집니다.

작성이 안된 /login으로 접근하는 경우 잘못된 접근이라는 메시지를 주기위해
라우터 설정의 "/" 경로에서 errorElement를 작성합니다.

  {
    path: "/",
    element: <Home />, // /경로로 오면 ---> Home
    errorElement: <div>오류가 발생했습니다.</div> // 루트경로에 작성하면 루트 하위의 모든 라우터에 적용됩니다.
  },

해당경로가 존재 하지 않을 시 표시됩니다.

리엑트 돔에서 제공하는 에러 엘리먼트를 사용하는 방법

import { useRouteError } from "react-router-dom"; // 리엑트 돔의 라우트에러 가져오기

// 인터페이스
interface RouteError {
    statusText?: string;
    message?: string;
}

function Error() {
    const error = useRouteError() as RouteError; // RouteError 타입사용
    return(
        <div>
            <h1>오류가 발생했습니다.</h1>
            <p>다음과 같은 오류가 발생했습니다.</p>
            <p>{error.statusText || error.message}</p>
        </div>
    )
}

export default Error; ---> App.tsx에 import 하고 루트경로에 errorElement: <Error />로 가져와서 사용

모델

---

특정 키워드를 사용하거나 직접적인 기능을 사용하는 것이 아닌, 데이터의 구조를 정의 하는 것 입니다.

• 백엔드, 데이터베이스에서 오는 정보를 타입으로 표현하는 것

|모델의 개념|
TypeScript 타입 모델 : interface, type을 사용해 데이터 구조 정의
ORM 모델 : DB 테이블과 매핑되는 클래스
MVC 모델 : 비지니스 로직과 DB 연동을 처리하는 계층

book.model.ts		//파일명의 경우 model 키워드가 특정한 의미가 있는게 아니라, 다른 파일과의 혼선을 줄이기 위해 사용한 것


export interface Book {
    id: number;
    title: string;
    img: number;
    category_id: number;
    form: string;
    isbn: string;
    summary: string;
    detail: string;
    author: string;
    pages: number;
    contents: string;
    price: number;
    likes: number;
    pubDate: string;
}

export interface BookDetail extends Book {
    categoryName: string;
    liked: boolean;
}

백엔드에서 Book 과 관련된 API에서 사용하는 데이터 모델의 구조입니다.

BookDetail 페이지에서는 'categoryName', 'liked'가 추가로 필요하여
Book을 상송(extends)하여 확장하였습니다.