[React] useParams() 사용하기

학습일 : 2023. 03. 21

---

useParams() 사용하기에 앞서

 

 

 

 

<Home.js>

먼저, Movie.js에서 id 를 사용할 수 있게 하기 위해 Home.js에서 <Movie /> 안에

 

id={movie.id} 를 줘야한다

 

 <Movie
    key={movie.id}
    id={movie.id}
    coverImg={movie.medium_cover_image}
    title={movie.title}
    summary={movie.summary}
    genres={movie.genres}
  />

 

이렇게 하면 이제 Movie가 prop으로 id를 받게된다.
Movie.js에서는

function Movie({ id, coverImg, title, summary, genres })

이렇게 위에 id를 추가시켜주면 되고 
밑에 propTypes 에도 id를 추가해주면 된다.

 id:PropTypes.number.isRequired,

Link도 이제 바꿔줄 필요가 있는데,

우리는 id 값을 받아왔으므로

 <Link to={`/movie/${id}`}> {title}</Link>

 

 

라고 써주면 클릭시 영화의 고유한 id 경로로 url로 간다.

/movie/156663 => 이런방식으로



<Movie.js>

import PropTypes from "prop-types";
import { Link } from "react-router-dom";

function Movie({ id, coverImg, title, summary, genres }) {
  return (
    <div>
      <div>
        <img src={coverImg} alt="" />
        <h2>
           <Link to={`/movie/${id}`}> {title}</Link>
        </h2>
        <ul>
          {genres.map((g) => (
            <li key={g}>{g}</li>
          ))}
        </ul>
        <p>{summary}</p>
      </div>
    </div>
  );
}

// PropType 설정
Movie.propTypes = {
  id:PropTypes.number.isRequired,
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default Movie;

 

---

정리하자면

 

1. Home.js 에서 prop으로 id를 작성

 id={movie.id}

import { useEffect, useState } from "react";

import Movie from "../components/Movie";

function Home() {

    const [loading, setLoading] = useState(true);

    const [movies, setMovies] = useState([]);

 

    const getMovies = async () => {

      const json = await (

        await fetch(

          `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`

        )

      ).json();

 

      setMovies(json.data.movies);

      setLoading(false);

    };

 

    useEffect(() => {

      getMovies();

    }, []);

 

    return (

      <div>

        {loading ? (

          <h3>로딩 중...</h3>

        ) : (

          <div>

            {movies.map((movie) => (

              <Movie

                key={movie.id} 

                id={movie.id}

                coverImg={movie.medium_cover_image}

                title={movie.title}

                summary={movie.summary}

                genres={movie.genres}

              />

            ))}

          </div>

        )}

      </div>

    );

}

export default Home;

2. App.js에서 :id 를 준다. 

<Route path="/movie/:id">

function App() {

  return (

    <Router>

      <Switch>

        <Route path="/movie/:id"> 

          <Detail />

        </Route>

        <Route path="/">

          <Home />

        </Route>

      </Switch>

    </Router>

  );

}

 

3. Detail.js에서

import {useParams} from "react-router-dom" 해주고

useParams 사용하여  const x = useParams()

x를 개발자도구 콘솔에 찍어보면

console.log(id);

import { useParams } from "react-router-dom";

function Detail() {

  const { id } = useParams(); // useParams 함수 사용

  console.log(id);

  return <h1>Detail</h1>;

}

export default Detail;

id 값이 출력됨

 

 

다음 게시물은

받은 id 값을 가지고 API에 요청보내기를 해볼 것이다.