Wellcome to React Router!

라우터

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것
React는 SPA이지만 눈속임으로 페이지를 이동하는 것 처럼 보여주는 것

Router dom 설치

- npm i react-router-dom

BrowserRouter

• 브라우저의 주소를 감지한다
• 필수적으로 사용
• 라우팅 기능을 사용할 컴포넌트 전체를 감싸줘야 한다
• index.js에서 을 감싸는 방식이 가장 일반적이다

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter>
	<App />
</BrowserRouter>

Routes와 Route

Routes

• 여러 경로(Route)들을 감싸서, 하위 Route 중 조건에 맞는 하나의 Route만 렌더링 해주는 역할. Switch와 비슷하다
• ex) User -> Main 페이지 요청
  Routes -> Route 확인 후 존재한다면 반환한다

Route

• 경로(Route)를 의미한다
• 필수 속성 : 사용자가 이러한 요청했을 때 -> path
  이 컴포넌트를 보여줄거야 -> element

<Routes>
	<Route path='/' element={<Main/>}></Route>
	<Route path='/about' element={<About/>}></Route>
	<Route path='/mypage' element={<MyPage/>}></Route>
    .
    .
    .
</Routes>

Link 태그

• History API를 통해 브라우저 주소의 경로만 바꿔주는 기능
• 하이퍼 텍스트를 사용할 때는 a태그를 사용하지만,
  a태그는 클릭 시 새로운 페이지를 불러오기 떄문에 react의 SPA 성격과는 맞지 않다.
  • 그래서 Link태그를 활용해서 주소값만 바꿔주는 것!
• BrowserRouter가 반드시 세팅되어 있어야 한다.

import { Link } from 'react-router-dom'
<Link to='경로'>링크텍스트</Link>

Hook

React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이,
state와, Effect등 여러 React 기능을 사용할 수 있도록 만든 라이브러리
함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다.
함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로
서로의 장점을 전부다 가지고 있다.

useNavigate

React Hook 중 하나로, 페이지 이동을 도와주는 함수

import { useNavigate } from 'react-router-dom'
const 변수 = useNavigate()
변수('경로')

Link vs useNavigate

클릭시 바로 이동해야하는 로직 구현 => Link
ex) 클릭시 바로 로그인 페이지로 이동!
페이지 전환 시, 추가 처리 로직이 필요하다면? => useNavigate
ex) 버튼을 클릭했을 때, 로그인 되어 있다면 'My Page'로,
로그인 되어있지 않다면 'Login Page'로 이동!

useParams

• 라우터 사용 시 Parameter 정보를 가져와서 사용하고 싶을 때 쓰는 React Hook
• 한가지 정보만 사용 가능 (보통 고유번호)
• 물품 or 게시글의 고유한 번호나 ID값을 설정하는데 적합하다

import { useParams } from 'react-router-dom'

<Route path='/경로/:파라미터변수명' element={컴포넌트}/>
let (파라미터변수) = useParams()

useSearchParams

• 라우터 사용 시 QueryString 정보를 가져와 관리하고 싶을 때 쓰는 React Hook
• 여러 값을 가져와서 사용할 수 있다
  ex) 검색 상품, 인기 상품, 품절 상품 등등... 일시적인 정보들에 주로 사용한다

import { useSearchParams } from 'react-router-dom'

<Link to='/detail/1?cate=이상하네'> [1] 하루밖에 안쉬었는데 왜 월요일이죠</Link>

const [query, setQuery] = useSearchParams()
{query.get('pop') && <span>[인기게시글] </span>}
{query.get('cate')} 관련 게시글