페이지 라우팅2 - React Router Dom의 유용한 기능

Path Variable (useParams)

useParams hook 사용

각 일기의 상세페이지를 보려면 /diary/1 과 같이 주소가 연결되어야함

• /diary 뒤에 /1 과 같이 url을 추가하면 인식하지 못함
  

Path variable 사용

• path variable 전달

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>제목입니다.</h2>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/edit" element={<Edit />} />
          {/* /:id = path variable 부분 */}
          <Route path="/diary" element={<Diary />} />
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

단, <Route path="/diary" element={<Diary />} />와 같이 url을 작성해놓으면 항상 /diary/id 의 형식으로 url을 입력받아야함. /diary는 접속할 수 없음

<Route path="/diary/:id" element={<Diary />} />
          <Route path="/diary" element={<Diary />} />

/diary와 /diary/:id 모두 url 연결주면 됨 (이번 프로젝트에서는 항상 /diary/id 의 형식으로 연결되기 때문에 제외)

• path variable 받아서 사용

// Diary.js
import { useParams } from "react-router-dom";

const Diary = () => {
  /* 
  useParams를 이용하면, App.js에서 전달되는 
  path variable들(ex. /id)을 모아서 객체로 전달해줌. 
  Diary.js에서는 해당 path variable을 {id}로 꺼내서 사용
  */
  const { id } = useParams();
  console.log(id);
  return (
    <div>
      <h1>Diary</h1>
      <div>이곳은 일기 상세페이지 입니다.</div>
    </div>
  );
};

export default Diary;

• url로 전달해 준 Path Variable 값이 id로 받아짐

---

Query String (useSearchParams)

: /edit?id=22&mode=dart 과 같이 물음표 키워드로 name=value를 엮어서 데이터를 전송하는 방법

• 웹페이지에 데이터를 간단하게 전달할 수 있는 방법

• /edit 뒤에 Query String을 사용하여 url을 날린 경우, edit 컴포넌트가 정상적으로 노출됨

• ? 뒤 경로는 페이지 라우팅에 영향을 주지 않음

• Query String 받아서 사용

// edit.js
import { useSearchParams } from "react-router-dom";

const Edit = () => {
  const [searchParams, setSearchParams] = useSearchParams();

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

  const mode = searchParams.get("mode");
  console.log(mode);
  return (
    <div>
      <h1>Edit</h1>
      <div>이곳은 일기 수정페이지 입니다.</div>
    </div>
  );
};

export default Edit;

useSearchParams

• 두 개의 인자를 가진 배열 반환
  • idx 0 : get()을 통해 전달받은 query String들을 꺼내서 사용 가능
  • idx 1 : searchParams를 변경시킴
    • 변경할 Query String 객체 전달

//edit.js
import { useSearchParams } from "react-router-dom";

const Edit = () => {
  const [searchParams, setSearchParams] = useSearchParams();

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

  const mode = searchParams.get("mode");
  console.log(mode);
  return (
    <div>
      <h1>Edit</h1>
      <div>이곳은 일기 수정페이지 입니다.</div>
      <button onClick={() => setSearchParams({ who: "dalbong" })}>
        QS 변경
      </button>
    </div>
  );
};

export default Edit;

• Query String 값이 setSearchParams()에 전달한 객체값으로 변경됨

---

Page Moving (useNavigate)

• 사용자가 link 태크를 클릭하지 않아도 의도적으로 페이지를 변경해줌

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

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

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

  const mode = searchParams.get("mode");
  console.log(mode);
  return (
    <div>
      <h1>Edit</h1>
      <div>이곳은 일기 수정페이지 입니다.</div>
      <button onClick={() => setSearchParams({ who: "dalbong" })}>
        QS 변경
      </button>
      <button
        onClick={() => {
          navigate("/");
        }}
      >
        HOME으로 이동
      </button>
    </div>
  );
};

export default Edit;

• useNavigate hook = 페이지를 이동시킬 수 있는 함수를 반환
• 해당 함수를 navigate로 받고, navigate() 인자로 경로를 전달하면 해당 경로로 이동할 수 있음.

뒤로 가기

//edit.js
<button onclick={() => { navigate(-1); }}>
	뒤로가기
</button>

• 뒤로 1번 이동 시, navigate()에 인자로 -1을 넣어 구현 가능