React Router의 유용한 3가지 기능

1. Path Variable(useParams)
2. Query String(useSearchParams)
3. Page Moving(useNavigate)

🔅 커스텀 Hooks

use 키워드가를 앞에 붙여 사용하게 되는데 React의 라이브러리들이 use키워드를 이용해 만들어낸 사용자 정의 Hooks를 커스텀 Hooks라고 한다.

➡️ 1. Path Variable(useParams)

import { useParams } from "react-router-dom";
const { id } = useParams();

사용할 컴포넌트에 import한 후에 useParams()를 객체의 값으로 비구조 할당을 해준다.
이때의 id는 어디서 온 것이냐면..

function App() {
  return (
    <BrowserRouter>
      <div className="App">
          <Route path='/diary/:id' element={<Diary />} />
        </Routes>
        <RouterTest />
      </div>
    </BrowserRouter>
  );
}

Router컴포넌트의 path경로 뒤에 /:의 값을 넣어 값을 받을 수 있다. -> Path Variable이라고 한다.
Path Variable값을 url경로를 이용해 사용 할 수 있다.

➡️ 2. Query String(useSearchParams)

• 웹페이지에 데이터를 전달하는 가장 간단한 방법
  /edit?id=10&mode=dark 의 식으로 전달하며 ?id=10&mode=dark이 부분을 Query String이라고 한다.
• 가장 유용하고 많이 사용한다.

Query String은 별도의 매핑을 하지 않아도 자동으로 매핑이 된다. 즉 ?키워드 뒤의 정보들은 페이지 라우팅 경로에 영향을 주지 않는다.

const [searchParams, setSearchParams] = useSearchParams();

• state처럼 배열의 비구조화 할당을 통해 값을 받는다.
  • searchParams : 데이터의 값
  • setSearchParams : 데이터를 변경시킬 수 있는 함수

1. searchParams 이용하기

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

const Edit = () => {

    const [searchParams, setSearchParams] = useSearchParams();

    const id = searchParams.get('id');
    const mode = searchParams.get('mode');

    console.log("id :", id, "/ mode : ", mode);
};

• get()메서드를 이용해 searchParams안에 있는 데이터를 가져올 수 있다.

• 결과값 => id : 10 / mode : dark

2. setSearchParams 함수 이용하기

<button onClick={() => setSearchParams({ who: "hhhh" })}>Query String 바꾸기</button>

setSearchParams의 인자로 변경할 데이터의 객체를 넣어주면 버튼을 클릭했을때 데이터 경로의 데이터가 변화하게 된다.

➡️ 3. Page Moving(useNavigate)

페이지를 이동하라 수 있는 함수를 반환한다.

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

const Edit = () => {

    const navigate = useNavigate();
};

• useNavigate()는 페이지를 이동하는 함수를 상수 navigate에 반환하기 때문에
  navigate의 인자로 경로를 작성하게 되면 navigate함수를 호출해서 경로를 이동할 수 있게 해준다.
  • 로그인이 안되 사용자가 로그인페이지로 가려고 할때,
    로그인 상태를 확인하고 로그인 상태가 아닌 경우 강제로 보내는 기능에 사용하기도 한다.
• Link태그를 사용하지 않더라도 의도적으로 페이지 이동을 할 수 있다.

return (
        <div>
            <button onClick={() => {
                navigate('/home');
            }}>HOME으로 가기</button>
            <button onClick={() => {
                navigate(-1);
            }}>뒤로가기</button>
        </div>

    );

• navigate함수의 인자로 -1을 넣으면 뒤로가기 기능을 만들 수 있다.