React_기초다지기_하루정리(React Router)

◼︎React

---

⚑목표 : 페이지 라우팅하기!

---

[Page Routing이란?]

• 웹서버가 요청에 명시되어 있는 경로에 따라 알맞은 페이지를 선택하고, 그 페이지를 반환하고,
  사용자가 그 페이지를 접속하는 일련의 과정이다.

[Router란?]

• 데이터의 경로를 실시간으로 지정해주는 역활을 하는 무언가 (길잡이의 역할)

[Routing이란?] : Route + ing

• 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정
  쉽게 말해서, 자신에게 도착한 데이터들이 어디로 가야하는지 길을 알려주는 과정이다!

[MPA : Multipage Application]

---

[Page들을 경로에 따라 맵핑해보자!]

우선적으로 Router을 이용하려면 설치를 진행해야한다!

npm install react-router-dom //터미널에 설치 후 이용하자!

[page들을 경로 설정해주는 방법]

import { BrowserRouter, Route, Routes } from "react-router-dom";

import Home from "./pages/Home";
import Edit from "./pages/Edit";
import New from "./pages/New";
import Diary from "./pages/Diary";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/edit" element={<Edit />} />
          <Route path="/diary" element={<Diary />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

1. import로 router를 사용하기전 불러선언해주어야함
2. 각각의 페이지들의 경로를 설정해줌
3. 라우팅해주고 싶은 페이지들을 Routers로 묶은 뒤 각각의 페이지들을 경로 설정해주면됨

-> 이렇게 되면 페이지가 /new로 넘어갈 때 랜더링 되는 식이고, h2태그 같은경우는
라우터 범위에 넣지 않았기 때문에 항시 화면에 출력됨.

[차별화된 링크태그(a herf = "" vs <Link to={"/"}> )]

• 본래의 웹페이지는 a태그를 이용하여 링크를 특정부분으로 이동할 수 있도록 걸어놓는다. 하지만
  이러한 방식은 리액트의 랜더링 방식과는 다른 부분이 존재한다.
• 리액트의 같은 경우는 클라이언트 사이드랜더링 기법을 이용하기 때문에 경로를 설정해주고,
  설정된 경로 빠르게 이동시켜준다.

 //기존의 링크태그 이용방법
 <a href ={"/new"}> NEW로 이동</a>

 //react의 Link태그
 improt {Link} from "react-router-dom"; // 사용전 선언확인 꼭 해주기

 <Link to ={"/new}HOME</Link> 
 //클라이언트 사이드 랜더링 기법을 사용

---

[React Router Dom의 유용한 기능]

[useParams : 사용자 정의 Hook]

• 전달받아서 들어오는 path variable을 객체로 만들어줌

import { useParams } from "react-router-dom";// 사용전 선언!

const Diary = () => {
  const {id}= useParams(); // ->내가받고자하는 인자를 넣어줌 
  return (
    <div>
      <h1>Diary</h1>
      <p>이곳은 일기 상세페이지입니다.</p>
    </div>
  );
};
export default Diary;

[Query String]

** ex)/edit?id=10&node=dark ->name과 value를 묶어서 데이터로 전달할 수 있는기법**

• 웹 페이지에 데이터를 전달하는 가장 간단한 방법

[Quert 사용 예시]

import { useNavigate, useSearchParams } from "react-router-dom";

const Edit = () => {
  const navigate = useNavigate();
  const [searchParams, setSerchParams] = useSearchParams();

  const id = searchParams.get("id");
  console.log("id : ", id);

  const mode = searchParams.get("mode");
  console.log("mode : ", mode);

  return (
    <div>
      <h1>Edit</h1>
      <p>이곳은 일기 수정페이지 입니다.</p>
      <button onClick={() => setSerchParams({ who: "san" })}>Qs 바꾸기 </button>
      <button onClick={() => navigate("/home")}>home으로 가기</button>
      <button onClick={() => navigate(-1)}>뒤로가기</button>
    </div>
  );
};
export default Edit;

• useSearchParams Hook을 사용하여 웹페이지의 path variable을 get할 수 있으며,
  setState와 비슷하게 setSearchPharams를 이요하게 되면, 값을바꿀 수 도있다!

추가적으로 중요한 라우터 Hook이 하나더있는데 바로 useNavigate라는 Hook이다.

• 네비게이트 같은 경우는 페이지를 이동시킬 수 있는 함수를 반환해주는데
  호출하는 변수에인자로 경로를 주게 되면 그 페이지로 이동하게 된다.
  //(위 코드에서는 const navigate선언 후 이 변수에 가고자하는 경로를 지정해주면 됨)
• 네비케이트를 사용하는 경우는 예시로 로그인이 안된 사용자가 로그인이 필요한 서비스를 접근하려고할떄,
  강제로 로그인 페이지로 이동시키는 경우 자주 사용된다.
  즉, 링크 태그를 클릭하지 않아도 강제로 이동시킬 수 있는 장점이 있다.