React - app 8 (router)

npm i react-router-dom@5.3.0  // 5.3.0 버전
npm i react-router-dom@6  // 6 버전

강의가 1년전 내용이라 5.3.0버전을 사용하였는데 업데이트 된 6버전을 보니 코드들을 좀더 깔끔하게 쓸수 있어 같이 작성해 보려고 한다.

router

제목을 눌렀을 때 페이지이동을 시키고 싶다면 router를 사용해 보자.

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

5.3v

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

6v

6v 에서는 Switch -> Routes로 변경되었다.

routes라는 폴더를 생성하자.
여기에 Home.js & Detail.js 를 생성하자.
Home.js : 메인 페이지
Detail.js : 제목을 눌렀을때 이동할 페이지

그리고 기존에 App.js에서 만들었던 코드를 전부 Home.js에 넣어주자. (App => Home 코드이동)

그리고 routes폴더에 있는 파일 두개를 App.js에 import 한다.

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

function App() {
    return null;
}

export default App;

5.3v
6v은 Switch 대신 Routes 사용

이제 Router코드를 작성해 보자.

function App() {
    return <Router>
        <Switch>
          <Route path="/movie" component={Detail}/>
            <Route path="/" component={Home}/>
        </Switch>
    </Router>
}

5.3v

BrowserRoter = Router import시 as 사용한 거 참고
Router를 부모로 둔다.
그 안에 Switch를 넣는다,Route간에 이동을 도와주는 역할이다.
이동할 path를 설정해 주고 마지막으로 이동할 대상(Home&Detail)을 넣어주면 끝.

function App() {
    return <Router>
        <Routes>
          <Route path="/movie" element={<Detail/>}>
            <Route path="/" element={<Home/>}>
        </Routes>
    </Router>
}

6v

Route의 component => element 로 변경 {}안에 문법도 element형식으로 변경되었다. (튜토리얼 참고)

이제 Detail로 라우터로 이동할 Link를 추가해 주자.

🖐url주소를 Route가 찾으면 컴포넌트(element)를 렌더링한다.

Movie.js로 이동

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

function Movie({poster_path, title, overview, genre_ids}) {
    return (
        <div>
            <img src={"https://image.tmdb.org/t/p/w200" + poster_path}/>
            <h2>
                <Link to="/movie">{title}</Link>
            </h2>
            <p>{overview}</p>
            <ul>{genre_ids.map((genre) => (<li key={genre}>{genre}</li>))}</ul>
        </div>
    );
}

5.3v & 6v

Link를 import 해준다.
Link를 걸어야할 대상을 감싸준다. ({title})
Link를 이동할 Route의 path로 설정(to="path")
{title}을 누를시 /movie 로 이동

주소가 변경되고 해당 컴포넌트로 이동하는 것을 볼 수 있다.

parameter

제목을 클릭했을 때 localhost:3000/movie 로 주소가 변경되는 것 까지 완료 했다면 뒤에 파라미터 값을 줘보도록 하자.

ex) localhost:3000/movie/2131231

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

path에 :id 를 추가해 주고 Movie.js로 넘어가자

<Link to={`/movie/${id}`}>{title}</Link>

//prop-types
id : PropTypes.number.isRequired

props에 먼저 id를 추가 하고 PropTypes도 추가해 한다.(id 값을 파라미터로 사용)

id={movie.id}

Home.js로 온 뒤 id에 값을 추가해 주자.

정상작동 👏👏👏

파라미터 값을 받아오는 함수도 알아보자.

import {useParams} from "react-router-dom";

const x = useParams();
    console.log(x)

바로 useParams 이다.

콘솔에서 확인 해보기
여기에 나오는 id는 우리가 Route에 지정한 값이므로 얼마든지 바꿔줄수 있다.

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

이런식으로 마음대로 바꿔도 된다.

const {id} = useParams();

id의 value값만 얻기

Detail 값 받기

https://api.themoviedb.org/3/movie/157336?api_key={api_key}

TMDB API 의 디테일 주소 TMDB-API 에서 확인 할 수있다.

export const KEY = "b20a8201e48fcb6dd7d605b15aacb7ec";
export const URL = "https://api.themoviedb.org/3/movie/";

Home.js의 URL과KEY를 export 한 뒤 Detail.js로 돌아가서 import 해주자.

import {URL,KEY} from "./Home"

const getMovie = async() =>{
        const json = await (
            await fetch(`${URL}${id}?api_key=${KEY}`)
        ).json();
        console.log(json)
    };
    useEffect(() => {
        getMovie();
    },[]);

함수를 만들어 async & await & fetch로 주소를 받아온다.
useEffect를 이용하여 mount시에 영향을 주지 않게 해준다.

⚡️useEffect에 대한 설명과 관련된 용어들이 아주 잘적혀있다.