[노마드코더] React로 영화 앱 만들기2

이제 다음 페이지로 넘어가기 위해서.

1. 페이지 컴포넌트를 만들어준다

페이지 컴포넌트에는, 전에 App.js 에서 썼던

데이터 정보를 스크린에 보여주는 태그들을 가져올것이당.

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

export default Movie;

바로 요러케

근데 이 데이터들은 지금 오류가 뜰것이야.

왜냐면 App.js 에서 불러온 데이터들이니까!

그래서 이 Movie 컴포넌트가 App.js 로부터 받을 예정인 정보들을 props object로 받을겡

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

export default Movie;

자 요렇게 바꿔주시공 데이터 받으러 App.js 로 고고싱링

App.js

  return (
    <div className="App">
      {loading ? (<h1>Loading...</h1>) : (<div>
        {movies.map((movie) => (
      <Movie />))}
      </div>
      )}
    </div>
  );
}

이제 Movie 컴포넌트를 렌더링 해줄게용

그리고 이제 Movie 컴포넌트에게 정보를 전달해줘야해잉.

prop 을 통해 데이터를 보내주장

        {movies.map((movie) => (
          <Movie
          coverImg={movie.medium_cover_image} 
          title={movie.title} 
          summary={movie.summary} 
          genres={movie.genres}
          />))}

prop 의 이름은 내가 맘대로 지어줘두되고, {} 안에 들어가는 아이는

제대로 작성해줘야함.

그리고 이 컴포넌트에게 키값을 줘야함 !!

          <Movie
          key={movie.id}
          coverImg={movie.medium_cover_image} 
          title={movie.title} 
          summary={movie.summary} 
          genres={movie.genres}
          />))}

이렇게 주공

이제 우리의 prop 를 정리할거여.

다시 Movie 컴포넌트로 돌아오고

Movie.jsx

import PropTypes from 'prop-types';

위에 import PropTypes 해주시공

이제 이 컴포넌트의 prop들의 타입을 정리해줄거여

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

이렇게 정해주면 끝, 마지막 genres 는 배열형태로 데이터가 나오기때문에, 배열의 프롭타입을 정해주기위해

arrayOf 함수를 써줬음.

이제 페이지를 전환해주기 위해서

React Router 를 알아볼거임.

일단은 npm 으로 깔아야함.

npm install react-router-dom

을 터미널에서 깔아줍시다

이제 우리는 route 별로 생각을 해줘야함.

예를 들어서 하나의 route 는

home, 홈스크린 , 홈페이지 등등으로

그래서 우리는 새로운 폴더를 만들어줄겅미.

자 이렇게 컴포넌트 폴더와 route 폴더를 각각 만들었씀.

route 폴더안에 Home.jsx 라는 route 를 만들어줄거임.

이 Home route 는 기본적으로 우리의 App component 전체를 가지고 있게 될것입니다.

Home.jsx

import './App.css';
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 (await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=9`)).json());
      setMovies(json.data.movies);
      setLoading(false);
    }
    useEffect(() => {
      getMovies()
    }, [])
    return (
          <div className="App">
            {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;

App.js 에서 작성했던 코드들을 다 이 Home.jsx 로 옮겨줍니더.

App.js

function App() {
      return (
          null
        )

}

export default App;

App.js 는 이렇게 바뀌도록 해줍니다.

그리고 Detail 이라는 route 를 만들어줍시다.

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

export default Detail;

영화 상세페이지가 되겠죠?

이제 App.js 에서는 이 route 들을 렌더링 해줘야해요.

이제 react-router-dom 의 사용법을 알아야겠죠?

react-router-dom 을 사용하기 위해서는 몇가지를 import 해야합니다.

App.js

import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

function App() {
      return (
          null
        )

}

import 를 해준뒤,

function App() {
      return (
          <Router>
            <Switch>
              <Route>
                
              </Route>
            </Switch>
          </Router>
        )

}

Router 컴포넌트를 넣어줄게요

그 안에는 Switch 컴포넌트를 넣어주는데,

이 컴포넌트는 Route 를 찾아주는 역할을 해줌.

근데 , 이 Switch는 react-router-dom 이 6버전으로 업데이트 되면서, 이제 지원을 안하게 되었다고 합니당??

대신 Routes 를 사용해준다고 합니다 그래서 , 다시 고쳐보겠슴다.

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

function App() {
      return (
          <Router>
            <Routes>
              <Route />
            </Routes>
          </Router>
        )

}

export default App;

Route 는 url 을 의미하는데, 이 route 를 찾으면 컴포넌트를 렌더링 해주는 원리래요.

하면서 이해하자구요.

              <Route path="/" element={<Home />} />

Route 에 이렇게 해줍시다. 이게 뭐냐면

유저가 이 경로에 있으면, 우리는 Home Route 를 렌더링해줄거라는 뜻이랍니다.

그리고 만들어놨던 영화 상세 페이지도 넣어줍시당

              <Route path="/movie" element={<Detail />} />
              <Route path="/" element={<Home />} />

이제 영화 제목을 클릭하면 /movie url 로 이동하게 만들어줘야해용

즉 link 를 걸어줘야한다!

a 링크를 사용하면 되겠지만, 그럼 홈페이지가 재 실행 된다는 단점이 있어용.

그래서 저흰 react 에서 사용할 수 있는 link 방식을 쓸겁니당.

그래서 Link 라는 컴포넌트를 사용해줄겁니댜앙

Link 란?
브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트

이 Link 컴포넌트는 Movie.jsx 에서 사용 고고

Movie.jsx

import { Link } from 'react-router-dom';

위에서 LInk 를 import 하고,

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

h2 이 제목이니. 여기다가 링크 걸어주면 됩니당.

이렇게 새로고침 없이 다른 페이지로 이동하는 방법 끝!