라우터 작성

1. 로그인 /login
2. 회원가입 /signup
3. 비밀번호 초기화 /reset

---

1. 도서 목록 /books
2. 도서 상세 /books/{id}
3. 장바구니 /cart
4. 주문서 작성 /order
5. 주문 목록 /orderlist

---

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

이게 리액트 라우트 돔이라는 건데, 이걸 이용하면 정말 쉽게 라우터를 지정해줄 수 있어. 여기서 지원하는 걸로 404를 따로 못 지정한 에러도 404나 맞는 걸로 에러를 뜨게 해줄 수 있다는 것이 정말 좋은 장점인 것 같애.

---

그래서 라우터는 타입스크립트에서 어떻게 사용하면 되냐!

React Router로 페이지 라우팅 구현하기

TypeScript에서 React Router 사용법

---

1. 라우터 설정 (createBrowserRouter)

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <Layout>
        <Home />
      </Layout>
    ),
    errorElement: <Error />,
  },
  {
    path: "/books",
    element: (
      <Layout>
        <div>도서 목록</div>
      </Layout>
    ),
  },
]);

각 속성 설명

path: URL 경로

• "/": 홈페이지 (예: http://localhost:3000/)
• "/books": 도서 목록 페이지 (예: http://localhost:3000/books)

element: 해당 경로에서 보여줄 컴포넌트

• <Layout>으로 감싸서 Header/Footer 자동 적용
• 각 페이지마다 다른 내용만 넣으면 됨

errorElement: 에러 발생시 보여줄 페이지

• 존재하지 않는 URL 접근시
• 컴포넌트 에러 발생시

---

2. Link 컴포넌트로 페이지 이동

기본 Link 사용

<Link to="/">
  <img src={logo} alt="book store" />
</Link>

의미:

• 클릭하면 / 경로로 이동 (홈페이지)
• <a> 태그와 비슷하지만 새로고침 안 됨!

동적 Link 사용

<Link to={item.id === null ? "/books" : `/books?category_id=${item.id}`}>
  {item.name}
</Link>

의미:

• item.id가 null이면 → /books 이동
• item.id가 0이면 → /books?category_id=0 이동
• item.id가 1이면 → /books?category_id=1 이동

---

3. a 태그 vs Link 컴포넌트

a 태그 사용 (잘못된 방법)

<a href="/login">
  <FaSignInAlt />
  로그인
</a>

문제점:

• 클릭하면 페이지 전체가 새로고침됨
• React 상태가 초기화됨
• 느림

Link 컴포넌트 사용 (올바른 방법)

<Link to="/login">
  <FaSignInAlt />
  로그인
</Link>

장점:

• 새로고침 없이 페이지 전환
• React 상태 유지
• 빠름

---

4. 쿼리 파라미터 사용

{CATEGORY.map((item) => (
  <li key={item.id === null ? "all" : item.id}>
    <Link to={item.id === null ? "/books" : `/books?category_id=${item.id}`}>
      {item.name}
    </Link>
  </li>
))}

결과:

• "전체" 클릭 → /books
• "동화" 클릭 → /books?category_id=0
• "소설" 클릭 → /books?category_id=1
• "사회" 클릭 → /books?category_id=2

쿼리 파라미터란?

/books?category_id=0
       ↑
     물음표 뒤에 붙는 데이터

의미:

• 같은 페이지(/books)지만
• 다른 카테고리 데이터를 보여줌
• 페이지 컴포넌트에서 category_id 값을 읽어서 필터링함

---

5. 전체 흐름

1. 사용자가 "소설" 클릭
   ↓
2. Link가 `/books?category_id=1`로 이동
   ↓
3. router가 `/books` 경로 찾음
   ↓
4. `/books` 페이지 컴포넌트 렌더링
   ↓
5. 컴포넌트에서 `category_id=1` 읽어서 소설 목록만 보여줌

---

6. TypeScript에서 라우터 타입

import { createBrowserRouter, RouterProvider } from "react-router-dom";

// 라우터 생성
const router = createBrowserRouter([...]);

// App.tsx에서 사용
function App() {
  return <RouterProvider router={router} />;
}

TypeScript 특징:

• createBrowserRouter가 자동으로 타입 추론
• path, element 등의 속성 자동완성
• 오타나면 에러 발생

---

정리

createBrowserRouter

• 라우터 설정을 배열로 정의
• path(경로)와 element(컴포넌트) 매칭

Link 컴포넌트

• <a> 태그 대신 사용
• 새로고침 없이 페이지 전환
• to 속성에 이동할 경로 지정

쿼리 파라미터

• ?key=value 형식
• 같은 페이지에서 다른 데이터 보여줄 때 사용

"URL 바꾸면서 새로고침 안 하는 게 React Router의 핵심!"