React 공부 7일차

라우팅이란?

웹 어플리케이션에서의 개념은 사용자가 요청한 url에 따라 알맞은 페이지를 보여주는 것이다.

블로그같이 여러 페이지로 구성된 웹 어플리케이션을 만들 때 각 페이지별로 컴포넌트들을 분리해가면서 관리하기 위해 필요하다.

 

props는 object일 뿐이고, 사용자는 그걸 열어서 item을 꺼내 쓰는 것.

component를 rendering하는 것은 함수를 불러오는 것.

 

App.js에 "react-router-dom" import하기

function App(){

  return (<BrowserRouter>

    {/* Switch는 Route(url)을 찾으면 component를 rendering함 */}

    <Routes>

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

       {/* user가 movie path에 있으면, movie component를 보여줘라. */}

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

     

    </Routes>

  </BrowserRouter>);

}

export default App;

Route path에 movie.id 값을 url 주소에 포함시키기 위해 <Route path="/movie:id" element={<Detail />}/>로 수정.

※ 중요: movie/id (x), movie:id (O)

 

Movie 컴포넌트에 id 받아야 하므로, Home.js 부분 코드의 props 추가해서 받아오기

<Home.js>

movies.map((movie)=>(

       

        //주의!!: return 바로다음에 개행이 오면, 아무것도 return하지 않는 것으로 인식

        <Movie

        //key는 React.js에서만, map 안에서 component들을 render할 때 사용하는 것.

        key={movie.id}

        id={movie.id}

        coverImg={movie.medium_cover_image}

        title={movie.title}

        year={movie.year}

        summary={movie.summary}

        genres={movie.genres}

        />

      )

<Movie.js>

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

function Movie({id,coverImg, title, year, summary, genres})

id:PropTypes.number.isRequired,

영화 제목을 클릭하면, id(54482)가 포함된 url로 이동

 

받은 id를 가지고 API에 요청 보내기를 하고싶다면..?

파라미터 값을 가져와야 한다.

useParams()

Router 사용 시 파라미터 정보를 가져와 활용할 때 쓰는 함수

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

function Detail(){

    const {id} = useParams()//useParameters 함수

    console.log(id)//movie.id 출력

    return <h1>Detail</h1>

}

export default Detail;

1) useParams import하기

2) 파라미터 정보 가져와서 콘솔에 출력해보면 id값을 제대로 가져온 것을 볼 수 있음.

useParams()로 불러온 파라미터(id)

 

 

결과물을 github에 업로드하기 위한 package 설치하기

• 환경 셋팅: 터미널 창에 "npm i gh-pages"' 입력해 패키지 설치
• npm-run-build: 웹사이트의 production ready code 생성, 코드가 압축되고 모든게 최적화
• package.json 파일로 가서 맨 아랫줄에 

homepage": "https://{github_username}.github.io/{github repository}"

작성하기.

 

scripts를 하나 추가

"deploy"가 하는 일: 방금 설치한 gh-pages를 실행시키고 "build"라는 디렉토리를 가져감.

근데, 먼저 build를 한 다음에 deploy를 한다는 것을 기억하고 싶지 않기 때문에 

"predeploy" command를 추가함. "deploy"를 처리하기 전, "predeploy"를 먼저 실행함.

npm run deploy하는 모습

deploy를 실행시키면 -> npm run build(predeploy 먼저 실행)->{코드 최적화, 압축...etc}

-> gh-pages -d build(gh page가 build 폴더를 "homepage"에 적어놓은 웹사이트에 업로드)

 

앞으로 코드를 수정하거나 한다면 npm run deploy를 해주면 위의 과정을 통해 github 페이지에 코드를 연동할 수 있음!