React : Router, Params, Build, Deploy

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

ReactRouter Install

npm install react-router-dom
강의영상은 @5.3.0였지만 본인은 @6.22.1을 사용하기로 했다.
일단 강의대로 진행하게 됄 때 맞이하게되는 몇가지 issue들이 있는데, Switch가 Routes로 변경되었다. 공식문서 Client side routing 참고.
👉🏻Feature Overview v6.22.1

Route의 방식도 변경되었다.
기존에는 <Route><컴포넌트></Route>형식으로 사용되었지만 v6이상 부터는 Route에 element로 컴포넌트를 라우팅한다. 또한 이상태로 build를 하게 되면 페이지에 접속했을 때 빈페이지만이 보여지게 되므로 Router에 basename={process.env.PUBLIC_URL}을 추가해야한다.

//App.js예시
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from 'react-router-dom';
import PageHome from './routes/PageHome';

function App() {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Routes>
        <Route path="/" element={<PageHome />} />
      </Routes>
    </Router>
  );
}
export default App;

vue만 사용해본 내 입장에서 본 react의 routing은 혁신이다.
vue2, vue3를 모두 사용해보고, vue2와 vue3모두 마이그레이션까지 해 보았지만 route 이게 생각보다 귀찮기도 하고 까다롭다는 생각이 들었는데 react의 routing은 말 그대로 충격적이다.
굳이 route.js를 만들어서 조건에 따라 어떤 컴포넌트를 보여줄지 일일이 설정을 하지 않아도 된다는게 너무너무 편리하고 좋다!

vue의 route.js에서 이런 일련의 과정을 지난 다음에 각 페이지 별로 path를 또 지정해야했다면 react에서는 그냥 Page에서 바로 routinge 해버리면 끝난다.

Link
Link는 Router와 같은 react-router-dom이 제공하는 component이다.
routing을 하면 페이지가 새로고침이 되는데 react의 장점을 살려서 적당한 시점에 Link를 사용한다면 페이지 새로고침 없이 원하는 페이지가 render된다.
단, App.js에서 Link로 Route할 component를 꼭 import해야한다.

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

function Movie() {
  return (
    <div>
      <h1>
        <Link to="/movie">{타이틀}</Link>
      </h1>
    </div>
  );
}

BrowserRouter, HashRouter

url에서 차이를 볼 수 있다.
http://localhost:3000/movie : BrowserRouter,
http://localhost:3000/#/movie : HashRouter

Dynamic URL : Params넘기기

URL에 Params를 같이 넘겨서 Params에 맞는 data를 호출하는 방법 또한 쉽다.
path="/카테고리/:params" 형식으로 작성하면 된다.
예를 들어 movie카테고리에서 id따라 보여지는 detailPage를 호출한다면, path="/movie/:id"로 넘겨주면 된다.

예시 : App.js

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<PageHome />} />
        //반드시 :id로 작성해야한다. id로 작성할 경우 id는 값이아닌 문자id로 처리된다.
        <Route path="/movie/:id" element={<PageDetail />} />
      </Routes>
    </Router>
  );
}

예시 : Index.js

<컴포넌트
  key={movie.id}
  propCover_image={movie.medium_cover_image}
  propTitle={movie.title}
  propSummary={movie.summary}
  propGenres={movie.genres}
  //props로 요소의 id를 전달한다.
  propGId={movie.id}
  />

예시 : Detail.js

useParams
React Router가 제공하는 Hook이며, <Route path>를 통해 현재의 url에 객체의 key/value를 쌍으로 반환하는 동적 매개변수dynamic params이다.

//최상단에 useParam import
import { useParams } from 'react-router-dom';
function Detail() {
  const x = useParams();
  console.log('x', x);
  return <h1>디테일 페이지</h1>;
}
export default Detail;

응용

화면에 보여지는 디테일 페이지라는 글자를 id에 맞는 영화 제목으로 변경하고자 한다.

import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

function PageDetail() {
  const { id } = useParams();
  const [movie, setMovie] = useState([]);
  async function getData() {
    const response = await fetch(
      `https://yts.mx/api/v2/movie_details.json?movie_id=${id}`
    );
    const jsonData = await response.json();
    setMovie(jsonData.data.movie);
  }
  useEffect(() => getData(), []);
  return <h1>{movie.title}</h1>;
}
export default PageDetail;

fetch를 사용하여 api를 호출하고 data를 가져왔다.
useEffect로 api는 한 번만 실행하도록 하고, state의 title를 화면에 뿌려줬다.

의도한대로 화면에 title이 보여지지만 콘솔에 에러가 보여진다.

hint

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]);

주어진 힌트대로 코드를 수정해보자.
의도한 대로 출력된다.

Build

강의를 기반으로 만든 movie-app을 배포해보자.

PUBLISHING
Install npm i gh-pages
github에서 무료로 제공해주는 패키지로, 결과물을 github pages에 업로드 할 수 있게 도와준다.

package.json의 script부분에는 deploy, predeploy 추가하고, 최하단에 homepage를 추가한다.
스크립트 디플로이, 프리디플로이 추가. 최하단 homepage 추가.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  },
  "homepage": "https://깃헙아이디.github.io/리포지토리 이름"

predeploy는 npm run deploy 실행 했을 때 build가 되도록 하는 옵션으로, 해당 옵션이 없으면 build가 되지 않기 때문에 아마도 404error가 출력될 것이다.
터미널에서 npm run deploy 하면 먼저 build가 된 이후 자동으로 깃헙 페이지에 배포된다.

👉🏻MOVIEFLEX