[React] useParams

⚡️전체 유저 리스트

import React, { useEffect } from "react";
import "./List.scss";

const List = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://reqres.in/api/users")
      .then(response => response.json())
      .then(result => setUsers(result.data));
  }, []);
};

return (
  <section className="list">
    <nav>
      {users.map(({ id, first_name, email, avatar }) => (
        <Link key={id} to={`/detail/${id}`}>
          <p>
            <strong>{first_name}</strong>
          </p>
          <p>{email}</p>
          <img alt="avatar" src={avatar} />
        </Link>
      ))}
    </nav>
  </section>
);

⚡️단일 유저 리스트

import React, { useEffect } from "react";
import { useParams } from "react-router-dom";
import "./List.scss";

const Detail = () => {
  const params = useParams();
  const userId = params.id;

  const [user, setUser] = useState([]);

  useEffect(() => {
    fetch(`https://reqres.in/api/users/${userId}`)
      .then(response => response.json())
      .then(result => setUser(result.data));
  }, [userId]);
};

return (
  <section className="list">
    <article>
      <p>
        <strong>{first_name}</strong>
      </p>
      <p>{email}</p>
      <img alt="avatar" src={avatar} />
    </article>
  </section>
);

1. useParams hook을 이용해 params 객체를 가져옵니다.
   • useParams() 함수를 호출하면 path params의 값은 객체 형태로 반환
2. params 객체 안에서 id 프로퍼티의 value를 userId 변수에 할당합니다.(동적 라우팅을 설정할 때 path parameter의 이름을 /detail/:id로 설정했기 때문에 id 프로퍼티에 접근합니다.)
3. useEffect를 안에서 API 호출을 진행합니다.
   • 호출할 API URL을 결정할 때 userId값을 활용하여 동적으로 API URL을 결정하고 있습니다.
4. path parameter가 변경되더라도 다른 컴포넌트가 보이는 것이 아니라 똑같은 Detail 컴포넌트가 보이도록 Router에서 설정이 되어있으므로, userId 값이 변경될 때마다 새로운 user의 정보를 Detail 컴포넌트에 보여주기 위해서 useEffect의 의존성 배열에 userId를 포함시켜줍니다.
   • 의존성 배열에 userId를 넣어줌으로서 userId의 값이 변경될 때 마다 새롭게 API 호출을 하고 user state를 변경해서 새로운 UI를 보여줄 수 있게 되었습니다.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import List from './pages/List';
import Detail from './pages/Detail';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<List />} />
        <Route path="/detail/:id" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

⚡️< Route path = " / post / : id(문자열) " element = { < Detail / } / >

1. 정적 라우팅은 프로젝트에서 사용할 수 있는 모든 경로를 미리 설정해두는 방식
2. 동적 라우팅은 Route를 설정할 때 URL의 전체 형태를 미리 정의하지 않고, URL을 특정 규칙으로 정의하고 그 규칙에 부합한다면 모두 해당 element를 보여주게 설정
3. path parameter는 URL에 있는 값을 마치 매개변수(parameter)처럼 사용하는 것입니다. 동적 라우팅을 사용하면서 path parameter를 이용해 다양한 UI를 표현할 수 있습니다