[ReactJS로 영화 웹 서비스 만들기 실습] Movie API + Install React Router Dom

IRISH·2024년 5월 1일

React 리액트

ReactJS-Movie-Web-Service

목록 보기

21/23

실습일자 : 2024.05.01

진행사항

React Router Dom을 설치한다.
- 버전 : 5.3.0
- cmd 명령어 : npm i react-router-dom@5.3.0
라우팅에 대한 개념을 공부한다.
라우트 별로 파일 구성 및 소스코드를 작성한다.

라우팅이란? & React-Router를 사용하는 이유

라우팅 : 네트워크에서 경로를 선택하는 프로세스
a 태그 대신 React-Router를 사용하는 이유
- SPA 사용자 경험 향상의 목적!!
  - a 태그를 사용하면 페이지 전체가 새로 로딩
    - 흔히 말하는 화면 깜빡임이 필수적으로 발생하고 이는 사용자 경험을 떨어뜨리는 큰 요인
  - 따라서 라우팅을 통해 부드러운 화면전환을 꾀하는 것!
SPA 안에서 모든 페이지를 다 렌더링해주는 형식으로 만들면 안되는 이유
- 만약 SPA 안에서 모든 페이지를 다 렌더링해주는 형식으로 만들면?
  - 특정 페이지 즐겨찾기 등록 불가
  - 뒤로가기 불가
  - 새로고침 불가
  - SEO 불가

소스 코드

변경 내용

home 라우트(페이지)는 모든 영화를 보여주고, Movie 라우트는 영화 하나만 보여준다.
home 라우트는 기본적으로 App 컴포넌트 전체를 가지고 있게 만듦

⇒ src/App.js

function App() {
  return null;
}

export default App;

이전 강의까지에서 했었던 App에 있는 것을 모두 Home라우트로 옮겼으니 App.js는 라우터를 렌더한다.

⇒ src/routes/Detail.js

function Detail() {
  return <h1>Detail</h1>;
}
export default Detail;

Detail 라우트에서는 상세 화면을 보여줄 예정이다.

⇒ src/components/Movie.js

import PropTypes from "prop-types";

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

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

export default Movie;

Movie 라우트는 영화 하나만 보여줌
Movie 컴포넌트는 medium_cover_image, title, summary, genres를 Prop으로 두고 있음
- 이 props를 모두 부모 컴포넌트로부터 받아옴

⇒ src/routes/Home.js

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=8.8&sort_by=year`
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <Movie
              key={movie.id}
              coverImg={movie.medium_cover_image}
              title={movie.title}
              summary={movie.summary}
              genres={movie.genres}
            />
          ))}
        </div>
      )}
    </div>
  );
}
export default Home;