리액트 라우터
react-router-dom 라이브러리 이용가능
npm install react-router-dom
import { BrowserRouter } from ‘react-router-dom’
vs HashRouter
- 샵 기호의 유무
- HashRouter 가 좀 더 라우팅 안전하게 가능. 원래 주소창은 서버에게 요청하는 곳. HashRouter 쓰면 샵 붙는데 이렇게 되면 절대 네버 서버에 요청하지 않고 리액트가 알아서 해주는 차원에 머물러 작업 수행 가능.
- 그러므로 브라우저 라우터쓸거면 서버에서 서버 라우팅 방지하는 api 작성해둬야함
index.js 편집
본격적으로 라우팅 시작
app.js 수정
import { Link, Route, Switch } from 'react-router-dom'
```react
메인페이지에요
상세페이지에요
<Route path="/어쩌구" component={Modal}></Route>
```
혹은
```react
import React from 'react';
import {HashRouter as Router, Route, Switch} from 'react-router-dom';
import Auth from '../routes/Auth';
import Home from '../routes/Home';
import Profile from '../routes/Profile';
import Navigation from './Navigation';
const AppRouter = (props) => {
return (
<Home userObj={props.userObj}></Home>
<Profile userObj={props.userObj} refreshUser={props.refreshUser}></Profile>
);
};
export default AppRouter;
```
와 같이 암튼 `Route` 쓰기 전에 `HashRouter` 혹은 `BrowseRouter` 로 감싸기
리액트 라우터는 매칭이 되는 것들을 다 보여줌
/detail 은 / 도 포함하기 때문에 / 를 보여줌
방지 방법
`` 이렇게 쓰면 됨
컴포넌트를 다른 파일로 빼서 만들려면 그 파일에도
import React, { useState } from 'react' 해줘여함
페이지 이동 => 링크 태그 / 버튼 태그
import {useHistory} from 'react-router-dom'
let history = useHistory();
```react
<button onClick={()=>{
history.goBack();
}}></button>
```
react-router-dom 도큐먼트 링크걸어놓고 읽어볼사람 읽어보게하자
history.push('/') 도 할 수 있음
> useHistory()는 여러분의 코딩생활을 편하게 해주는 일종의 Hook입니다. (useState 이런거랑 비슷한겁니다)
>
> 그럼 이제 history 라는 변수엔 큰 object {} 자료가 하나 저장이 되어있습니다.
>
> 그 **object 안에는 페이지 이동 내역 + 유용한 함수**가 저장되어있습니다.
```react
```
switch 쓰면 path 에 해당하는 route 가 여러 개 있을 때 그 중 최상단에 있는 route 만 유효하게 작용할 수 있도록 해줌
---
url 파라미터
중요한 데이터 js 파일은 app.js 에서 받아오고 props 로 넘겨주는게 나음
특정 컴포넌트 js 에서 선언하고 거기서 받아오는 것 보다는!
위에서 아래로는 그나마 갈 수 라도 있지만
아래에서 위로 가기는 상당히 어려울지
그래서 결론
중요한 데이터는 엡 컴포넌트에 보관
혹은 redux 파일에 보관
암튼
이제 detail/1 detail/2 detail/3 이렇게 만들건데
그러면 route 를 3개를 만들어야하냐?
그래도 되지
근데 100개면?
100개 만들어야하냐? 그래도 되지.
> 근데 URL 만드실 땐 반복문은 안쓰고 보통 URL 파라미터 문법을 이용해 축약을 시켜줍니다.
>
> -> 라우트 하나만 써서 하나의 컴포넌트만을 이용할 것인데 그러다가 이제 그 컴포넌트에 띄울 컨텐츠를 url 파라미터를 이용해서 결정하는 것임.
그래도 편한건
/detail/:id 같이 url **파라미터**를 사용하는 것
1. 콜론뒤에 맘대로 작명
2. 여러개 사용 가능 /detail/:id/:id2
이렇게 하면 이제 딱 하나만 만들어도 됨 근데 그러려면 그 안에 있는 데이터를 id 를 이용해서 표현할 줄 알아야 해
이 떄 필요한 것
1. 안에서 쓸 데이터를 이용할 때 id 를 쓸 수 있도록 데이터의 고유 번호 붙여넣기. 그리고 그 고유번호에 해당하는 인덱스에 그 데이터를 넣은 배열 만들기
2. 상품을 눌렀을 때 Routing 을 시작할 건데 그 때 history.Push 등을 해야함
이 때 이 파라미터를 이용하여 데이터 바인딩 하는 방법?
import {useParams} from 'react-router-dom'
useParams 훅 사용할 수 있음
```react
let {id} = useParams();
```
useParams 는 object 형을 반환 -> 사용자가 입력한 url 파라미터 이름이 모두 저장되어있음.
이 useParams 에 값이 들어가는 타이밍이 좀 궁금하구만
그리고 id = useParams() 를 어떤 js 위에 선언해야 하는지도.
> useParams() 라는 함수는 현재 URL에 적힌 모든 파라미터를 {파라미터1,파라미터2} 이런 식으로 저장해주는 고마운 함수입니다.
>
> 그걸 destructuring 문법을 이용해서 따로따로 변수로 빼서 저장한 것이고요.
>
> 그래서 **id라는 변수는 :id 자리에 있던 숫자**를 의미합니다.
>
>
>
> 그러니까 /detail/1로 접속하면 id라는 변수는 1이 되고
>
> /detail/100 으로 접속하면 id라는 변수는 이제 100이 되는 겁니다.
>
> 이것이 우리가 찾던 그 변수군요. 그걸 아까 필요했던 곳에 집어넣도록 합시다.
타이밍: 그니까 url 을 먼저 본다음에 거기서 id 라는 변수로 파싱한다는 거네? 근데 그원리는 그러면???
숙제에서 find 이용하는 법 알아두기
---
## 질문
BrowserRouter 어디쯤에서 감싸줘야함?
