React learning #9 useParams, gh-pages deploy

useParams

리액트에서 라우터 사용 시 파라미터(url 변수값) 정보를 가져와 활용하고 싶다면 useParams라는 훅을 사용하면 된다. 

 

mport React from 'react';
import { useParams } from 'react-router-dom';

const test = () => {
  let { params } = useParams();

  return (
    <div className="test">
      <p>현재 페이지의 파라미터는 { params } 입니다.</p>
    </div>
  )
}

 

React Router는 dynamic url을 지원해 주기도한다.

dynamic url : url에 변수도 넣을 수있음

 

 

function App() {
    return (
        <Router>
            <Switch>
                <Route path="/movie/:id"> 이부분을 tomato로 변경하면
                    <Detail />
                </Route>
                <Route path="/">
                    <Home />
                </Route>
            </Switch>
        </Router>
    );
}

 

 

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

function Detail() {
    const x = useParams();
    console.log(x);
    return <h1>Detail</h1>;

       
}

///object

    id : "37385"

    tomato: "37385"로변경됨

 

object 형태니까

const {id} =useParams();과 같이 사용하면됨

 

 

 

gh-pages

npm i gh-pages

결과물을 github pages에 업로드 할 수있게 해주는 패키지

 

npm run build를 하면 production으로 코드가 압축되어서 브라우저가 이해할 수 있게 만든다.

 

1.package.json에 

"hompage": https://github username.github.io/github respository name 

git remote -v 하면 레포지터리 이름 나옴 

2.scirpt에 

"deploy":"gh-pages -d build"

"predeploy":"npm run build" //deploy 전에 npm run build 해야하는거 자동으로 ㅏ기위해 npm run depoly 하면 predepoly가 실행되고 이는 build 실행 후 depoly (gh-pages -d build)실행됨

build폴더를 해당 hompage에 실행하는 것