결과
Github 웹 호스팅 페이지
[ wlwlsus.github.io/react-study-app ]
Routing
Routing이란?
- 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정이다.
- 최적의 경로는 주어진 데이터를 가장 짧은 거리로 또는 가장 적은 시간 안에 전송할 수 있는 경로다.
React Router
-
리액트에서 많이 쓰이는 라우터 라이브러리 이다.
-
SPA(Single Page Application)방식으로 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.
-
사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다.
1. 종류
-
BrowserRouter
- Link 컴포넌트로 to 속성에 이동할 경로를 써준다.
- Route 컴포넌트 path 속성에서 Link의 to 속성을 component mapping 경로를 기술한다.
- 새로고침 하면 경로를 못찾아 에러가 발생한다.
-
HashRouter :
- 주소에 해쉬(#)가 붙는다.
- 검색 엔진이 읽지 못한다.
BrowserRouter VS HashRouter
- 많은 사람들이 이미 BrowserRouter를 압도적으로 자주 사용한다.
- URL을 위치를 변경하는데 JS를 사용할 수 없어서 이전에는 HashRouter를 많이 썼는데 BrowserRouter가 등장하면서 점차 HashRouter는 사용하지 않는다.
- BrowserRouter가 HashRouter에는 없는 History Location을 지원하기 때문에 이로써 웹 개발 시얻는 장점이 많기 때문이다.
History란?
2. 설치
-
npm
npm install react-router-dom
-
yarn
yarn add react-router-dom
3. 사용 예시
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Detail from "./routes/Detail";
import Home from "./routes/Home";
function App() {
return (
<Router>
<Routes>
<Route path={`${process.env.PUBLIC_URL}/`} element={<Home />}></Route>
<Route path="/movie/:id" element={<Detail />}></Route>
</Routes>
</Router>
);
}< BrowserRouter >(as Router)
- 최상단에서 하위 라우터 태그를 감싸준다.
< Routes>
- 여러 Route 를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
< Route>
- path 속성에 경로, element 속성에는 컴포넌트를 붙여준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *를 사용하면 된다.
'/' 로 이동하면 Home.js를 렌더링하고
'/movie/{아이디 값}'로 이동하면 Detail.js 를 렌더링한다.
< Link >
-
웹 페이지에서 링크를 보여줄 때 a 태그를 사용한다. 하지만 a 태그는 클릭 시 페이지를 불러 오기 때문에 사용하지 않는다.
-
그래서 Link 컴포넌트를 사용하는데, 생김새는 a 태그를 사용하지만, History API를 통해 브라우저 주소의 경우로만 바꾸는 기능이 내장되어 있다.
- 문법
- import { Link } from "react-router-dom";
- < Link to="경로">링크명< /Link>
Not Found 처리하기
import NotFound from './NotFound';
...
<Route path="*" element={< NotFound />}>< /Route>
- 상단에 정해둔 URL 이외 모든 경로(*) 에 대해 Not Found를 띄워준다.
URL 파라미터
- "path="/movie/:id" 처럼 경로에 ' : ' + '값'으로 설정한다.
- URL 파라미터가 여러 개인 경우 /product/:productId/:productName 과 같은 형태로 설정할 수 있다.
- 받은 데이터는 useParam을 통해 사용할 수 있다.
- movie data에서 :id로 7893이 전달 되어졌다.
Github 웹 호스팅으로 배포하기
- 이전에 미리 Github에 Repo가 있어야 한다.
- package.json 파일로 이동한다.
- build와 deploy를 위해 "scripts"에 다음 코드를 추가한다.
"deploy": "gh-pages -d build",
"predeploy": "npm run build"
- 가장 아래에 다음 코드를 추가해준다.
"homepage": "https://Github닉네임.github.io/프로젝트명"
- 터미널에 'npm run deploy'로 배포하자!
설정 값에 넣어둔 'npm run build'와 'gh-pages -d build'가 실행되고
약 2 ~ 5분 동안 기다리면 배포가 된다.
출처
노마드코더 : React로 영화 정보 API 웹 페이지 구현
갓대희님 포스팅 : 라우팅에 대한 자료와 코드
https://wonit.tistory.com/299
https://ko.wikipedia.org/wiki/%EB%9D%BC%EC%9A%B0%ED%8C%85
