React :: Router / Restful Route

페이지를 여러개 만들어주기

 

 

 

App.js

import './App.css';
import Aboutpage from './page/Aboutpage';
import Homepage from './page/Homepage';

function App() {
  return (
    <div>
      <Homepage/>
      <Aboutpage/>
    </div>
  );
}

export default App;

 

 

 

컴포넌트 두개

 

 

 

아직까지는 한 화면에서 보이게 된다

 

 

 

https://reactrouter.com/en/main/getting-started/installation

Installation

 

라우터 설치

npm install react-router-dom@6

 

 

 

 

 

오피셜 도큐먼트를 보면서 index.js 에 해당 코드를 붙여준다 (App.js 에도 마찬가지로 필요한 코드 넣어주기)

 

 

 

 

import { Routes, Route } from "react-router-dom";
import './App.css';
import Aboutpage from './page/Aboutpage';
import Homepage from './page/Homepage';

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Homepage/>}/>
        <Route path="/about" element={<Aboutpage/>}/>
      </Routes>
    </div>
  );
}

export default App;

 

 

 

 

 

Aboutpage.js

import React from 'react'
import { useNavigate } from 'react-router-dom'

const Aboutpage = () => {
    const navigate = useNavigate()
    const goToHomepage = () => {
        navigate('/') //가고 싶은 url 경로 입력
    }
    return (
        <div>
        <h2>About page</h2>
        <button onClick={goToHomepage}> Homepage 로 이동! </button>
        </div>
    )
}

export default Aboutpage;

 

 

 

 

 

---

 

 

라우터의 api 디자인 패턴

 

Restful Route : REST 규칙을 이용해서 만든 api 디자인 패턴

http 명령어와 URL을 매칭시켜 url 디자인을 좀 더 단순하고 통일성 있게 만들었다

 

http 명령어

GET : 데이터를 가져올 때 사용 (fetch 하면 기본 명령어 속성이 Get)

POST : 데이터 생성

PUT : 데이터 수정

DELETE : 데이터 삭제

 

RestFul Route의 필요성

페이지를 만드는 사람마다 url의 디자인이 달라진다면 이름의 통일성이 없어지고 

어떤 아이템에 대해 생성(create), 읽기(read), 수정(update), 삭제(delete) 행위에 대해서 총 4개의 url이 필요하게 된다

이를 해결하기 위해 나온 게 Restful 디자인이다

url에서 동사는 빼고 이를 http 명령어로 대체한다

 

/items + get 명령어 : 아이템 읽어오기

/items + post 명령어 : 아이템 생성 하기

/items + put 명령어 : 아이템 수정 하기

/items + delete 명령어 : 아이템 삭제 하기

 

이런 규칙으로 items 라는 하나의 url로 4가지 액션을 할 수 있다

 

내가 하나의 아이템만 가져오고 싶다면 뒤에 아이템의 id를 붙이는 것도 Restful Route의 규칙이다

 

/items/:id + get 명령어 : id를 가진 아이템 읽어 오기

/items/:id + put 명령어 : id를 가진 아이템 수정 하기

/items/:id + delete 명령어 : id를 가진 아이템 삭제 하기

 

 

 

 

import { Routes, Route } from "react-router-dom";
import './App.css';
import Aboutpage from './page/Aboutpage';
import Homepage from './page/Homepage';
import Product from "./page/Product";
import ProductDetail from "./page/ProductDetail";

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Homepage/>}/>
        <Route path="/about" element={<Aboutpage/>}/>
        <Route path="/product" element={<Product/>}/>
        <Route path="/product/:id" element={<ProductDetail/>}/>
      </Routes>
    </div>
  );
}

export default App;

 

id 값은 파라미터이므로 가변적으로 사용할 수 있다

 

 

---

 

Homepage.js

import React from 'react'
import { Link, useNavigate } from "react-router-dom";

const Homepage = () => {
  const navigate = useNavigate();
  const goProductPage = () => {
    navigate('/product?q=pants');
  }
  return (
    <div>
        <h1>홈페이지</h1>
        <Link to="/about">about page로 이동!</Link>
        <button onClick={goProductPage}>프로덕트로 이동!</button>
    </div>
  )
}

export default Homepage

url id 설정 

 navigate('/product?q=pants');

 

 

 

 

ProductDetail.js

import React from 'react'
import { useParams } from 'react-router-dom';

const ProductDetail = () => {
  const {id} = useParams()
  return (
    <div>
        <h1>바지 상품 보여주는 뷰 {id}</h1>
    </div>
  )
}

export default ProductDetail;

 

홈페이지에 프로덕트로 바로 이동하는 버튼

설정 해놓은 url id가 뜬다

 

 

 

 

 

---

 

 

 

useSearchParams() 배열을 반환 한다

 

import React from 'react'
import { useSearchParams } from 'react-router-dom';

const Product = () => {
  let [query, setQuery] = useSearchParams();
  console.log("쿼리 확인!", query.get('q'));
  return (
    <div>
        <h1>모든 프로덕트 뷰</h1>
    </div>
  )
}

export default Product

query.get('q')

쿼리에 있는 q 값을 가져오겠다는 뜻!

 

 

콘솔창에 쿼리 확인! pants 라고 뜬다

 

---

프라이빗 페이지 만들어주기 

로그인 화면 생성하기 

 

 

App 안에 있는 PrivateRoute 는 함수가 아니라 컴포넌트이다! (대문자로 시작)

 

 

리다이렉트

authenticate == true? <UserPage/> : <Navigate to="/login"/>

Navigate to="이동할 url 페이지" => 이동할 페이지로 리다이렉트

 

 

 

const [authenticate, setAuthenticate] = useState(false)
  const PrivateRoute = () => {
    return authenticate == true? <UserPage/> : <Navigate to="/login"/>
  };

여기서 useState 값이 true 라면 

http://localhost:3000/user 로 이동 했을 때 user page의 내용이 나온다