1.Routes 복습

import "./App.css";
import { Routes, Route, Navigate } from "react-router-dom";
import { Detail, Login, Main, MyPage, Shop } from "./pages/index";
import { useState } from "react";
function App() {
  const [login, setLogin] = useState(false);
  const Redirect = () => {
    // Navigate 브라우저의 경로를 바꿔준다.
    // 페이지 리다이렉트 가능
    // mypage는 보호받는 페이지
    // 로그인이 안되어있는 상태면 메인 페이지로 이동 시킨다.
    return login == true ? <MyPage login={login} /> : <Navigate to={'/'}/>;
  };
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Main login={login} />} />
        <Route
          path="/login"
          element={<Login login={login} setLogin={setLogin} />}
        />
        <Route path="/shop" element={<Shop login={login} />} />
        {/* 매개변수 데이터베이스의 id는 primarykey,num은 상품번호 ,name은 이름 모두 Params처럼 전달 가능 */}
        <Route path="/detail/:id/:num/:name" element={<Detail login={login} />} />
        {/* 로그인이 돼있을 때만 mypage접근 가능 */}
        <Route path="/mypage" element={<Redirect />} />
      </Routes>
    </div>
  );
}

export default App;

• 저번에 사용했던 Routes 이다.
• 차이점은 Redirect이다. Redirect는 만약 로그인이 안되어있다면 Navigate 훅을 return한다.
• Navigate 훅은 to에 있는 경로로 강제로 이동시키는 훅이다
• 즉 Main 컴포넌트로 가게 된다.

2.useLocation, useParams, useSearchParams

import React from "react";
import { Header } from "../components";
import { useLocation, useParams, useSearchParams } from "react-router-dom";
// useLocation: hook함수 함수 현재 브라우저의 url 위치 값을 가져오는데 사용
// useParams: hook함수 함수 url에 params 값을 접근하는데 사용 객체의 형태로 가져올 수 있다.
// useSearchParams: hook함수 url의 쿼리값을 가져올 때 사용 문자열을 해석해서 쿼리 매개변수의 값을 가져온다.

const Detail = () => {
  let temp = [
    { num: 10, name: "셔츠" },
    { num: 20, name: "바지" },
    { num: 30, name: "모자" },
    { num: 40, name: "장갑" },
  ];
  const location = useLocation();
  const useParam = useParams();
  console.log(location);
  console.log(useParam);
  const [query, setQuery] = useSearchParams();
  // query.get() 메서드: 매개변수로 쿼리의 key로 value를 가져올 수 있다.
  console.log(query.get("size"));
  return (
    <div>
      <Header name={"detail"} />
      <div>{temp && temp[useParam.id].num}번</div>
      <div> 이름:{temp && temp[useParam.id].name}</div>
    </div>
  );
};

export default Detail;

• useLocation() 는 현재 주소의 도메인 뒷 부분을 다 갖고온다.
• useParams() 는 파람스로 준 주소를 key와 value형태로 반환시켜준다.
• useSearchParams()는 쿼리 형태로 된 url을 객체 형태로 반화한다.
• ?size=2 라고 쿼리값을 url로 보내면 query.get("size") 는 2가 된다.

path={"/detail/0/10/shirts"}
와 같다면
위 코드에서 console.log 값은 다음과 같다.
console.log(location);=>{pathname: '/detail/0/10/shirts', search: '', hash: '', state: null, key: 'ena0bem7'}
console.log(useParam);=>{id: '0', num: '10', name: 'shirts'}

3.느낀점

🖥️ 간단하게 route와 navigate를 알아보았다. 이미 했던 거지만 vanilla javascript만 쓰다 편하게 라이브러리로 이동하고 query,params를 가져오니 오히려 역으로 적응이 되지 않았다. 앞으로 많이 쓸 함수와 훅이지만 바닐라로 했던 힘든 구현에 대한 기억을 잊지말고, 항상 기초부터 올라가야 한다는 생각을 다시 했다.