React - Path Parameter, Query Parameter

1. Path Parameter

• 페이지 주소를 정의할 때, 유동적인 값을 전달해야 할 때가 있습니다.
  이는 파라미터와 쿼리로 나뉘어 질 수 있습니다.

// 나쁜 예
"/users/1" => <Users id={1} />
"/users/2" => <Users id={2} />
"/users/3" => <Users id={3} />

// 좋은 예
"/users/:id" => <Users /> // useParams().id

• 일반적으로 Path Parameter 는 1가지 정보만 보내줄 때 주로 이용합니다.
• 위에 처럼 달라지는 부분을 매개변수로 처리해주는 것이 좋습니다.
• : 는 Path Parameter 가 올 것임을 의미
• id 는 Path Parameter 의 이름을 의미합니다. 변수명 짓든 임의 이름 지정 가능

2. useParams

• Parameter 는 즉 매개변수 입니다.
• useParams Hook 을 이용해서 id와 route 를 매치 시켜줍니다.
  현재 페이지의 Path Paramete 의 정보를 담고 있는 객체를 반환!

3. Query Parameter

Query Parameter: /about?details=true

• 일반적으로 Query Parameter 는 특정 id 나 이름을 가지고 조회할 때 사용하고,
  Query 의 경우 어떤 키워드를 검색하거나, 필요한 옵션을 전달할 때(ex- 다중 필터) 사용됩니다.
• Path 와 다른점은 ? 가 들어간다는 것!

// Query Parameter 예시
const LIMIT = 12;

export default function Users() {
  const [users, setUsers] = useState([]);
  const navigate = useNavigate();
  const location = useLocation();
  console.log(location);

  // 데이터 로딩
  useEffect(() => {
    fetch(`http://localhost:8000/users${location.search || `?limit=${LIMIT}&offset=0`}`)
      .then((res) => res.json())
      .then((res) => setUsers(res.users));
  }, [location.search]);

  const updateOffset = (buttonIndex) => {
    // const limit = 12; // 한 화면에서 그려줄 데이터 갯수
    // const offset = buttonIndex * limit; // 그 데이터의 갯수의 시작점
    // const queryString = `?limit=${limit}&offset=${offset}`;

    const offset = buttonIndex * LIMIT; // 그 데이터의 갯수의 시작점
    const queryString = `?limit=${LIMIT}&offset=${offset}`;

    navigate(queryString);
  }

  return (
    <div className="photos">
      <h1>Mini Project - Pagination</h1>
      <Buttons updateOffset={updateOffset} />
      <CardList users={users} />
    </div>
  );
}