2. Shop(1)
Router(페이지 나누기)
react-router-dom
react-router-dom라이브러리 이용- npm install 또는 yarn add 를 이용하여 설치
- index.js 파일안에
import {BrowserRouter} from 'react-router-dom'추가 <BrowserRouter>태그를<App/>태그를 감싸도록 추가한다
// 예시
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);BrowserRouter vs HashRouter
-
HashRouter: 라우팅을 안전하게 할 수 있게 도와줌 HashRouter를 사용하면 사이트 주소뒤에 #이 붙게되는데 #뒤에 적는 것은 서버로 전달되지 않는다 그래서 라우팅은 리액트가 알아서 잘 해줄 수 있다 -
BrowserRouter: 라우팅을 리액트가 아니라 서버에게 요청할 수도 있어서 위험하다 그러므로 서버에서 서버 라우팅 방지하는 API를 작성해둬야한다
Route
- App.js 파일안에
import {Link, Route, Switch} from 'react-router-dom'추가 (Link와 Switch는 나중에 사용할거라 미리 작성) - 원하는 곳에
<Route> </Route>태그를 작성하고 <Route 안에>
path와 path 방문시 보여줄 HTML을 적으면 된다 <Route path="/경로"></Route>
/:id
- 경로 작성할 때
콜론(:)을 붙이면모든문자를 받겠다는 URL 작명법이다(동적 라우팅) - 콜론 뒤에 id자리는 함수 파라미터처럼
자유롭게 작명할 수 있다 - 파라미터는 2개 3개 몇개든 사용이 가능하다 (ex. /:id/:id2... )
// 예시
<Route path="/"> (보여줄 HTML...) </Route> // /로 접속시
<Route path="/detail"> (보여줄 HTML...) </Route> // /detail로 접속시
<Route path="/:id"> (보여줄 HTML...) </Route> // /모든문자 라는 경로를 의미
// Router쓰는 다른방법
<Route path="/경로" component={component이름}></Route>
<Route path="/경로"> <component이름 /> </Route>++ /detail 경로로 접속해도 / 경로 내용이 보이는 이유는 매칭이 되는 것들은 다 보여주기 때문이다 이때 exact 라는 속성을 추가하면 경로가 정확히 일치할 때만 보여준다(ex. <Route exact path="/"> )
React Router 특징
- HTML 내부의 내용을 갈아치워서 다른페이지처럼 보여주는 것
Link
- Router를 이용한 버튼만들기 Link 태그는 페이지 나눌때 같이 import해왔다
- 원하는 곳에
<Link to="경로"> 버튼 </Link>사용
Switch
- 매치되는 Route 들을 전부 보여주지 말고 한번에 하나씩만 보여주고 싶을때 쓰는 기능
<Route>들을<Switch>태그로 감싸주면 된다- 여러개의 Route 가 매칭이 되어도
맨 위의 Route하나만 보여준다 - 이걸 응용하면 페이지를 나눌때 겪었던 /경로 문제도 exact를 쓰지않고 문제를 해결할 수 있다
useHistory
뒤로가기버튼 만들기
- useHistory() 함수 가져오기
import {useHistory} from 'react-router-dom'; - 새로운 변수를 만들고 그 변수안에 useHistory() 함수 집어넣기
- useHistory 함수에 저장된 여러 자료들 중에서
goBack()함수 사용하기
// 예시
let history = useHistory();
<button onClick={() => history.goBack()}> 뒤로가기 </button>
// 뒤로가기 버튼을 누르면 이전 페이지로 이동한다
// .goBack() 대신 .push('경로')를 이용하면 특정 경로로 이동시킬수 있다
// 이밖에 여러 유용한 함수가 있으므로 검색해서 사용하면 된다++ useHistory()는 코딩생활을 편하게 해주는 일종의 Hook이다(useState 이런거랑 비슷)
useParams
- useParams() 함수 가져오기
import {useParams} from 'react-router-dom' - { 사용자가 입력한 URL파라미터들 } = useParams();
- /:id 사용시 id자리에 사용자가 입력한 값을 반환한다
// 예시
let { id } = useParams();
return (
<div> id </div>
)
코린이