React #8. Movie introduction, router-dom

채찍피티 왈
`react-router-dom`은 React 애플리케이션에서 클라이언트 사이드 라우팅을 쉽게 구현할 수 있게 도와주는 라이브러리입니다. 페이지 간 이동이나 URL 변화를 관리할 수 있게 해주며, 이를 통해 SPA(Single Page Application)에서도 페이지 전환과 같은 사용자 경험을 제공할 수 있습니다.

예를 들어, 사용자가 특정 경로로 이동하면 해당 경로에 맞는 컴포넌트를 렌더링하고, 뒤로 가기나 앞으로 가기와 같은 브라우저의 내비게이션 기능도 지원합니다. 이 라이브러리를 사용하면, 브라우저의 주소창에 있는 URL에 따라 서로 다른 화면을 렌더링하거나, `Link` 컴포넌트를 이용해 화면 간의 이동을 구현할 수 있습니다.

따라서 `react-router-dom`은 SPA를 만들 때 매우 유용하며, 페이지 이동이 필요할 때 서버로 요청을 보내지 않고도 브라우저에서 페이지 전환이 이루어지는 것처럼 보이게 할 수 있습니다. 이는 특히 네트워크 요청이 필요 없는 클라이언트 사이드 렌더링 상황에서 더욱 빛을 발합니다.

 

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

App.js

react-router-dom 5버전 -> 버전6 바뀐 부분

1. Switch컴포넌트가 Routes컴포넌트로 대체되었습니다.
Switch -> Routes

2. Route컴포넌트 사이에 자식 컴포넌트를 넣지 않고, element prop에 자식 컴포넌트를 할당하도록 바뀌었습니다.
Route path="/" element={< Home / >}

import { useEffect, useState } from "react";
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>
                <Route path="/" element={<Home/>}/>
                <Route path="/movie" element={<Detail/>}/>
            </Routes>
        </Router>
    );
}

export default App;

 

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 response =  await fetch('https://yts.mx/api/v2/list_movies.json?minimum_rating=8&sort_by=year');
        const json = await response.json();
        setMovies(json.data.movies);
        setLoading(false);
    }
    // 아무것도 주시하지 않고 있기 때문에 한번만 실행된다.
    useEffect(() => {
        getMovies();
    }, []);
    console.log(movies);
    return (
        <div>
            {loading ? (<h1>Loading...</h1> 
            ) : (
                <div>
                    {movies.map((movie) =>
                    // Key 는 React 에서 렌더링할때 꼭 필요한 속성이고,
                    // Movie 컴포넌트를 props 를 통해서 값을 전달하고 있다. 
                    <Movie 
                        key={movie.id}
                        coverImg={movie.medium_cover_image} 
                        title={movie.title} 
                        summary={movie.summary} 
                        genres={movie.genres}/>)}
                </div>
            )}
        </div>
    );    
}

export default Home;

Movie.js

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

function Movie({coverImg, title, summary, genres}) {
    return (
        <div>                  
            <img src={coverImg} alt={title}/> 
            {/* <a href="/movie"><h2>{title}</h2></a> */}
            {/* 일반적인 HTML 의 a 태그를 사용하면 페이지 새로고침이 일어나
            사용자의 경험을 저하시킨다. 그러므로 react-router-dom 에서 제공하는
            Link 를 사용해 새로고침이 없이도 페이지 이동을 할 수 있도록 하자. */}
            <Link to="/movie"><h2>{title}</h2></Link>
            <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;

Detail.js

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

export default Detail;