📝 오늘 한 것

1. React-router-dom / parameter

📚 배운 것

1. PRACTICE

1) movie app

(1) React JS에서 페이지 전환하는 방법

React JS에서 페이지를 전환하기 위해 React-router-dom을 사용해야 한다.

$ npm i react-router-dom

routes 폴더와 components 폴더를 만들었다.
Movie.js 파일을 components 폴더 안으로 옮겼다.

routes 폴더 안에 Home.js 파일과 Detail.js 파일을 만들었다.
App.js 파일의 App 컴포넌트에 작성한 코드를 Home.js 파일의 Home 컴포넌트로 옮겼다.

대신 App 컴포넌트는 router(url을 보고 있는 component)를 render 하도록 했다.
url에 따라서 Home 또는 Detail을 보여주게 된다.

react-router (v6 이상) 사용법 참고

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./routes/Home";
import Detail from "./routes/Detail";

function App() {
  return (
    <Router>
      <Routes> // root 경로를 맨 마지막에 작성해야 한다.
        <Route path="/movie" element={<Detail />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

(2) 하나의 route에서 다른 route로 이동하는 방법

movie title를 클릭하면 detail 페이지로 이동하도록 하기 위해 link를 사용한다.
a 태그를 사용할 수도 있지만 이 방법으로는 페이지 전체가 재로딩된다.
link 컴포넌트는 브라우저를 새로고침 하지 않고도 다른 페이지로 이동시켜준다.

<h2>
  <Link to="/movie">{title}</Link>
</h2>

(3) URL parameter

detail 페이지에서 실제로 해당 영화에 대한 정보들을 보여주기 위해 url에 파라미터(url에 속한 변수)를 추가한다.

// App.js
<Route path="/movie/:id" element={<Detail />} />

// Movie.js
const Movie = ({ id, title }) => {
  return (
    <h2>
      <Link to={`/movie/${id}`}>{title}</Link>
    </h2>
};

// Detail.js
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

const Detail = () => {
  const { id } = useParams(); // 💡 useParams 함수를 이용해 url의 파라미터를 받아올 수 있다
  const [loading, setLoading] = useState(true);
  const [movie, setMovie] = useState({});

  const getMovie = async () => {
    const json = await (
      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
    ).json();

    setMovie(json.data.movie);
    setLoading(false);
  };

  useEffect(() => getMovie());

  return (
    <div>
      <h1>
        {loading ? (
          <strong>로딩 중...</strong>
        ) : (
          `${movie.title} (rating ${movie.rating})`
        )}
      </h1>
      <img src={movie.large_cover_image} alt={movie.title} />
      <p>{movie.description_full}</p>
    </div>
  );
};

export default Detail;

✨ 내일 할 것

1. 마무리