[React] useParams로 상세 페이지 구현

React Router 페이지 나누기

Route 컴포넌트를 사용하여 리스트 페이지(Items)와 상세 페이지(Item)를 Route로 묶어 서로 다른 컴포넌트로 분리

---

페이지 라우팅 설정

import { Routes, Route } from "react-router-dom";
import Items from "./Items";
import Item from "./Item";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />

      <Route path="/items">
        <Route index element={<Items />} />
        <Route path=":id" element={<Item />} />
      </Route>
    </Routes>
  );
}

export default App;

 

/items 경로는 Item 리스트 페이지를 기본으로 표시, :id 경로는 각각의 아이템 상세 페이지(Item)를 렌더링합니다.

---

API 호출 함수

아이템의 상세 정보를 가져오기 위해 API 호출 함수 작성

export async function getItem(id) {
  const response = await fetch(
    `https://hwiiron.com/items/${id}`
  );
  const data = await response.json();
  return data;
}

 

fetch 메서드를 사용하여 API로부터 아이템 데이터를 비동기적으로 가져오고, JSON 형태로 파싱하여 반환합니다.

---

상세 페이지 컴포넌트 구현

상세 페이지에서는 아이템 ID를 이용하여 해당 아이템의 정보를 가져옵니다.

const [item, setItem] = useState(null); // 아이템 상태 관리

const { id } = useParams(); // URL에서 아이템 ID 추출

useEffect(() => {
const fetchData = async () => {
  const data = await getItem(id); // API 호출
  setItem(data); // 아이템 정보 상태 업데이트
};
fetchData(); // 데이터 가져오기 호출
}, [id]); // ID 변경 시 다시 호출

if (!item) return null; // 아이템 데이터가 없으면 아무것도 렌더링하지 않음

• 상태 관리: useState를 사용하여 아이템의 정보를 상태로 저장
• URL 파라미터 사용: useParams를 통해 URL에서 아이템 id를 추출
• 비동기 데이터 가져오기: useEffect를 통해 컴포넌트가 마운트될 때 API를 호출하여 아이템 데이터를 가져옴

---

요약

• React Router를 사용하여 페이지를 라우팅하고, 아이템 리스트 페이지와 상세 페이지를 구성
• API 호출 함수를 작성하여 서버로부터 아이템 정보를 비동기적으로 가져옴
• 상세 페이지 컴포넌트는 URL에서 아이템 id를 읽어 해당 아이템의 상세 정보를 렌더링