[React] useParams를 이용하여, 게시글 리스트와 조회 하기.(index, show)

해당 게시글은 Nomad Coder님의 강의를 보고 작성한 게시글 입니다.

해당 강의에 있는 영화 API를 사용 합니다.

 

 

src/index.js

//index.js

import React from "react"
import ReactDOM from "react-dom/client"
import { BrowserRouter } from "react-router-dom"
import App from "./App"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

 

src/App.js

//App.js

import {  Route, Routes } from "react-router-dom";
import Detail from "./components/Detail";
import List from "./components/List";

export default function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<List />}/>
        <Route path="/:id" element={<Detail />}/>
      </Routes>
    </div>
  )
}

 

 

src/components/List.js

//List.js

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

export default function List () {
    //영화 목록 상태
    const [movies, setMovies] = useState([])

    //fetch를 이용한 영화 목록 API 요청 함수
    const getMovies = async () => {
        //json에 API 응답을 json 형식으로 저장
        const json = await (
          await fetch(
            "https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year"
          )
        ).json()

        //응답인 json변수 안의 data.movies 데이터를 movies에 저장
        setMovies(json.data.movies)
      }

      //빌드될 때, getMovies 함수 실행
      useEffect(() => {
        getMovies()
      }, [])

      //map 함수와 Link Tag를 이용한 받아온 영화 목록을 li로 뿌린다.
    return(
        <div>
            <h1>영화 목록</h1>
            <ul>
                {movies.map(item => <Link to={`/${item.id}`}><li key={item.id}>{item.title}</li></Link>)}
            </ul>
        </div>
    )
}

 

src/components/Detail.js

//Detail.js

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

export default function Detail () {
    //하나의 영화 상태 관리
    const [movie, setMovie] = useState()

    //useParam을 이용하여 현재의 id parameter 추출
    const { id } = useParams()
  
    //fetch를 이용한 영화 상세 API 요청 함수
    const getMovie = async () => {
      const json = await (
          //리터럴을 사용하여, 영화 id가 요청 받은 id parameter와 같은 것 요청
        await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
      ).json()

      //응답인 json 변수 안의 data.movie 데이터를 movie에 저장
        setMovie(json.data.movie)
    }
    //빌드될 때, getMovies 함수 실행
    useEffect(() => {
      getMovie()
    }, [])

    return(
        <div>
            <h1>영화 상세</h1>
            <br />
            <h3> 제목 : {movie.title}</h3>
        </div>)
}

 

useParam().id는 현재 요청 받은 경로의 id parameter를 추출할 수 있다.

 

"/" 경로의 List.js

"/:id" 경로의 Detail.js