📝 오늘 한 것

1. react 기초 강의 복습(완료)

📚 배운 것 (복습)

1. react-router (v6)

movie app 만들기

App.js 파일에 한꺼번에 작성했던 코드들을 나눴다.
src/routes/ 안에 Home.js와 Detail.js 파일을 작성했다.
src/components/ 안에 Movie.js 파일을 작성했다.

1) BrowserRouter, Routes, Route

npm i react-router-dom

// App.js
import { BrowserRouter, Routes, Route } from "react-router-dom"; // 이 컴포넌트들은 url을 바라보고 있다
import Home from "./routes/Home";
import Detail from "./routes/Detail";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} /> {/* 사용자가 root(/)에 있으면 <Home /> 컴포넌트를 렌더링 */}
        <Route path="/movie" element={<Detail />} /> {/* 사용자가 /movie로 이동하면 <Detail /> 컴포넌트를 렌더링 */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

2) Link

페이지를 이동하고자 할 때 a 태그를 이용해도 되지만 이렇게 되면 전체가 새로고침 된다.
react-router의 Link를 이용하면 새로고침 없이 페이지를 이동할 수 있다.

// Movie.js
import PropTypes from "prop-types";
import { Link } from "react-router-dom";

function Movie({index, title, rating, genres, summary}) {
  return (
    <div>
      <h2 style={{ display: "inline" }}>{index + 1}. <Link to="/movie">{title}</Link></h2>
      <span> - 평점 {rating}점</span>
      <ul>{genres.map((genre) => <li key={genre}>{genre}</li>)}</ul>
      <p>{summary}</p>
  </div>
  );
}

Movie.propTypes = {
  index: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
  summary: PropTypes.string.isRequired,
};

export default Movie;

3) useParams (동적 url 만들기)

코드 챌린지

현재 사용자가 Home에서 영화 제목(http: //localhost:3000/movie)을 누르면 Detail 컴포넌트는 그저 < h1>Detail</ h1> 을 반환하고 있다.
이동한 페이지에서 해당 영화에 대한 정보를 보여주기 위해서는, 이동한 페이지에서 fetch를 이용해 https:// yts.mx/api/v2/movie_details.json?movie_id=...로부터 데이터를 가져와야 한다.
그런데 url의 마지막에는 각각의 movie.id의 값을 넣어줘야 한다.
movie.id의 값은 각 페이지에서 url 파라미터를 이용해 받아올 수 있다.

// App.js
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/movie/:id" element={<Detail />} /> // 💡 :id 추가
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Route가 지켜보고 있는 url인 /movie를 /movie/:id로 수정한다.
id에는 어떤 값이든 올 수 있다.
사용자가 /movie/:id 로 이동하면 Detail 컴포넌트가 렌더링된다.

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

function Detail() {
  const { id } = useParams(); // 💡 useParams() === { id: ... }
  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>
      {/* 💡 첫 컴포넌트 렌더링 시 아직 비동기 작업이 끝나지 않아 movie의 값은 {}이다.
      이로 인해 모든 prop이 undefined가 되어 PropTypes에 의해 콘솔 창에 경고가 뜬다. loading 변수를 이용하는 이유이다. */}
      { loading
        ? <strong>로딩 중입니다...</strong>
        : <Movie
          id={movie.id}
          title={movie.title_long}
          rating={movie.rating}
          genres={movie.genres}
          summary={movie.description_full}
        />
      }
    </div>
  );
}

export default Detail;

useParams를 이용해 url 파라미터 id의 값을 받아오고 나면 나머지는 Home 컴포넌트와 동일한 로직을 거쳐 렌더링 과정이 진행된다.

2. github 배포

이 사이에 css 작업도 했다.

npm i gh-pages

build 한 후 deploy 해야 한다.
npm run deploy만 입력해도 자동으로 build가 진행되도록 deploy와 더불어 predeploy script를 추가한다.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "deploy": "gh-pages -d build",
  "predeploy": "npm run build"
}

🙋‍♀️ 질문

1. 질문을 위해 위에서 작성한 코드의 일부를 간략히 수정했다.

function Detail() {
  const [loading, setLoading] = useState(true);
  const [movie, setMovie] = useState({});
  const getMovie = async() => {
    const json = await (await fetch("...")).json();
    setMovie(json.data.movie);
    setLoading(false);
    console.log(movie); // 1번 콘솔로그
  };

  useEffect(() => getMovie(), []);
  
  console.log(movie); // 2번 콘솔로그

  return (
    <div>
      { loading
        ? <strong>로딩 중입니다...</strong>
        : <Movie title={movie.title_long} />
      }
    </div>
  );
}

export default Detail;

위 코드의 실행 결과

• 먼저, 2번 콘솔로그 위치에서 빈 배열 [] 이 출력된다.
• 그 후, 2번 콘솔로그 위치에서 (20)[...] 가 출력된다.
• 이어서, 2번 콘솔로그 위치에서 (20)[...]가 출력된다.
• 마지막으로, 1번 콘솔로그 위치에서 빈 배열 [] 이 출력된다.

내가 이해한 바는 다음과 같다.

• 먼저, 페이지가 처음 열리고 아직 fetch가 완료되기 전에 Detail 컴포넌트 렌더링이 진행돼서 2번 콘솔로그 위치에서 빈 배열 [] 이 출력된다.

• fetch를 완료한 후 setMovie(json.data.movie)에 의해 리렌더링이 일어나고 movie state가 바뀌었기 때문에 2번 콘솔로그 위치에서 20[...] 가 출력된다.

• 마찬가지로 setLoading(false)에 의해 리렌더링이 일어나고 loading state가 바뀌었기 때문에 2번 콘솔로그 위치에서 20[...] 가 출력된다.

• 마지막으로 getMovie 함수 본문 안에서 console.log(movie), 즉 1번 콘솔로그가 실행된다.
  🙋‍♀️ 여기서 앞의 과정과 연계해서도 정확히 왜 빈 배열 [] 이 출력되는 건지 모르겠다.

✨ 내일 할 것

1. react 다음 강의 시작