[React] Routing 시 state 보존방법

Q. 안녕하세요? 리액트에서 link를 통해 state를 전달했을 때 link로 가게 된 페이지에서 새로고침을 하면 전달받은 state가 날라가는 문제가 있는데... 실제 서비스에서는 그렇지 않잖습니까?? 이거는 어떤 것을 공부해야할까요??

A. 그래서 뒤에 파라미터를 붙이고 만약 파라미터 id로 데이터 조회 용도라면 mount 시에 받은 param 값으로 api요청을 불러올 수 있겠져..그러면 아무리 새로고침 해도 url에 있는 param값 기준이니까 없어지지 않을거고요..

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";

// Params are placeholders in the URL that begin
// with a colon, like the `:id` param defined in
// the route in this example. A similar convention
// is used for matching dynamic segments in other
// popular web frameworks like Rails and Express.

export default function ParamsExample() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

function Child() {
  // We can use the `useParams` hook here to access
  // the dynamic pieces of the URL.
  let { id } = useParams();

  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
}