React Router v6.3을 사용하는 동적 페이지

동적 페이지 및 경로는 관련된 콘텐츠를 포함하는 페이지로 정의할 수 있습니다. 소셜 미디어 웹사이트의 사용자 프로필 페이지를 예로 들 수 있습니다. 소셜 미디어 플랫폼에는 사용자의 일반 정보를 표시하는 프로필 페이지가 포함되어 있는 경우가 많습니다. 사용자마다 프로필에 대한 정보가 다르지만 전체 구조는 동일하게 유지되는 것이 동적 페이지의 본질입니다.

이것을 React에서 어떻게 구현할 수 있는지 봅시다. Ghibli API를 사용하여 영화 목록을 가져오고 모든 영화에 대한 동적 페이지와 경로를 구현할 것입니다. 영화를 클릭하면 해당 영화에 대한 자세한 정보를 표시하는 동적 페이지로 이동합니다.

1 단계

create-react-app을 사용하여 새로운 React 프로젝트를 생성합니다. 또한 터미널을 통해 프로젝트 폴더에서 'npm install react-router-dom'을 실행하여 React Router를 설치합니다. react-router-dom 패키지에는 웹 애플리케이션에서 React Router를 사용하기 위한 바인딩이 포함되어 있습니다.

App.js 파일을 열고 기본 코드를 제거하고 다음을 추가합니다.

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import MoviePage from "./MoviePage";
import HomePage from "./HomePage";

const App = () => {
  return (
    <div>
      <Router>
        <Routes>
          <Route exact path="/" element={<HomePage />} />
          <Route path="/movie/:movieId" element={<MoviePage />} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;

2 단계

홈페이지라는 또 다른 별도의 구성 요소를 만듭니다. 이것은 영화 데이터를 얻기 위해 Ghibli API를 호출하는 우리의 홈페이지가 될 것입니다. App.js에서 이 구성 요소에 대한 경로를 이미 정의했습니다. 이제 API 호출을 추가해 보겠습니다.

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";


const HomePage = () => {
    const [isLoading, setIsLoading] = useState(true);
    const [data, setData] = useState();

    useEffect(() => {
      fetch("https://ghibliapi.herokuapp.com/films", {})
        .then((res) => res.json())
        .then((response) => {
          setData(response);
          setIsLoading(false);
        })
        .catch((error) => console.log(error));
    }, []);

    console.log("Data!", data);

    return (
      <>
        {!isLoading &&
          data.map((movie) => {
            return (
              <h5 key={movie.id}>
                <Link to={`/movie/${movie.id}`}>{movie.title}'s Page</Link>
              </h5>
            );
          })}
      </>
    );
  };

  export default HomePage;

두 가지 상태가 있습니다. true 또는 false일 수 있는 isLoading은 API에서 데이터를 수신했는지 여부를 알려줍니다.

HomePage 구성 요소가 렌더링될 때 useEffect 후크를 사용하여 데이터를 가져옵니다. API에서 데이터를 가져올 때 우리는 isLoading의 값을 false로 설정하고 데이터를 우리가 얻는 JSON으로 설정합니다.

이제 HomePage 구성 요소 내부의 jsx를 보면 isLoading 값을 확인하고 false인 경우 응답 데이터를 통해 매핑하여 영화 이름을 렌더링하는 것을 볼 수 있습니다.

'npm start'로 앱을 실행하면 화면에 영화 이름이 표시되어야 합니다.

3단계

그러나 우리는 영화 목록만 원하는 것이 아니라 각 영화에 대한 동적 경로가 있는 별도의 페이지도 원합니다.

따라서 각 영화의 세부 정보를 가져오는 API에서 데이터를 가져오는 MoviePage라는 또 다른 구성 요소를 만들어 보겠습니다.

import React, { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";

const MoviePage = () => {
  const { movieId } = useParams();
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState();

  useEffect(() => {
    fetch(`https://ghibliapi.herokuapp.com/films/${movieId}`, {})
      .then((res) => res.json())
      .then((response) => {
        setData(response);
        setIsLoading(false);
        console.log(`https://ghibliapi.herokuapp.com/films/${movieId}`);
      })
      .catch((error) => console.log(error));
  }, [movieId]);
  console.log(data);

  return (
    <>
      {!isLoading && (
        <>
          <h1>Title: {data.title}</h1>
          <h2>Plot: {data.description}</h2>
          <Link to="/">Back to homepage</Link>
        </>
      )}
    </>
  );
};

export default MoviePage;

HomePage와 같은 방식으로 API에서 데이터를 가져와 각 사람에 대한 세부 정보를 나열하는 MoviePage 구성 요소를 정의했습니다. 또한 이 구성 요소에 대한 새 경로(예: movie/:movieId)를 정의했습니다. 이것은 우리의 일반 노선과 약간 다릅니다. 여기에서 경로를 통해 매개 변수 movieId를 전달합니다. 그런 식으로 해당 경로의 단일 구성 요소는 해당 매개 변수를 기반으로 동적일 수 있습니다.

HomePage는 동영상 ID를 경로 매개변수로 사용하여 이 동적 경로에 대한 링크를 반환합니다.

MoviePage를 면밀히 관찰하면 구조는 동일하게 유지되지만 페이지의 모든 콘텐츠는 movieId에 따라 달라집니다. 즉, 구성 요소가 완전히 동적임을 알 수 있습니다.

useParams 후크는 현재 URL에서 . 하위 경로는 상위 경로에서 모든 매개변수를 상속합니다. useParams 후크를 사용하면 현재 경로의 매개변수에 액세스할 수 있습니다.

결론

React Router에 대한 더 많은 통찰력을 얻으려면 공식 문서를 읽으십시오.

React Router Docs