---

react-router-dom

• React는 SPA(Single Page Application)이기 때문에, HTML 여러 개로 페이지를 구성하는 JS와 다름.
• 여러 페이지(라우터)를 내부의 엘리먼트를 조정해 렌더링 하는데
• 일반적으로는 react-router-dom 라이브러리로 구현.

셋팅

1. $ npm i react-router-dom 으로 설치.
2. index.js 에서 아래처럼 셋팅. (<App /> 컴포넌트를 <BrowserRouter> 컴포넌트로 감싸기)

// 항상 외부 컴포넌트 등을 쓰려면 import
// 라이브러리에서 BrowserRouter 컴포넌트 가저오고,
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    // App 컴포넌트 감싸기
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

라우터 만들기

• <Routes>, <Route> 컴포넌트는 라우터를 만들 때 사용.
• 페이지 구조(폴더 구조)에서 가장 상위(App.js)에 위치하는 것이 합리적이라 생각.(개취)
• 웹앱의 구조를 한번에 보기 편하고, 의도를 파악하기도 유리하다 생각.
• <Routes> 는 <Route> 를 감싸는 역할.
• <Route path="/url경로" element={ 보여줄내용 } />

// App.js
import { Routes, Route } from 'react-router-dom'

<Routes>
  // '/' 경로는 메인을 의미
  <Route path='/' element={<Introduction />} />
  <Route path='/best' element={<Menu />} />
  <Route path='/couple' element={<CoupleSet />} />
</Routes>;

• 404페이지 또한 구현 가능.

import { Routes, Route } from 'react-router-dom'

<Routes>
  <Route path='/' element={<Introduction />} />
  <Route path='/best' element={<Menu />} />
  <Route path='/couple' element={<CoupleSet />} />
  // '*' 경로는 모든 경로를 의미하며, 위에 정의한 경로를 제외한 모든 경로를 의미
  <Route path='*' element={ <div>존재하지 않는 페이지입니다.</div> } />
</Routes>

라우터 중첩(nested routes)

import { Routes, Route } from 'react-router-dom'

<Routes>
  <Route path='/menu' element={<Menu />} />
  <Route path='/menu/best' element={<BestMenu />} />
  <Route path='/menu/set' element={<SetMenu />} />
</Routes>

• 서브라우터(서브경로) 구현 가능.
• 하나 기억할 것은 <Outlet> 컴포넌트를 이용해 하위 컴포넌트의 위치를 정해줘야 함.
• 위의 페이지 구조는 라우터 중첩으로 아래와 같이 가능.

// Menu.js
import { Outlet } from 'react-router-dom'

function Menu(){
  return (
    <div>
      <h1>메뉴입니다.</h1>
      <Outlet />
    </div>
  )
}

// App.js
import { Routes, Route } from 'react-router-dom'

<Routes>
  <Route path='/menu' element={<Menu />}>
    <Route path='best' element={<BestMenu />} />
    <Route path='set' element={<SetMenu />} />
  </Route>
</Routes>

• /menu/best 접속시 <Menu /> 와 <BestMenu /> 가 렌더링 되고,
• /menu/set 접속시 <Menu /> 와 <SetMenu /> 가 렌더링.
• 하위 메뉴는 상위 컴포넌트의 <Outlet> 자리에 위치.

URL 파라미터

• :파라미터 를 이용해 라우터(페이지) 생성 가능.
• 여러 라우터(페이지)를 만들 때 이용 가능.
• <Route path="/menu/:id" element={ <Menu /> }/>
• useParams 을 이용하면 URL파라미터를 받아올 수 있음.

// Menu.js
import { useParams } from 'react-router-dom'

function Menu(){
  let {id} = useParams();
  
  return (
    <>
    ...
    </>
  )
}

라우터(페이지) 이동

• 주소를 직접 적어 접속 하면, 페이지 새로고침 작동하기 때문에,
• 링크를 만들 곳에 <Link>, <NavLink>, useNavigate() 컴포넌트를 이용해 라우터 이동.

<Link>

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

<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

<NavLink>

• 스페셜한 <Link>.
• 활성 상태인 라우터(현재 페이지)에 간단한 스타일이나 클래스 지정 가능.

// 활성 상태인 라우터에 .nav-active 클래스 지정하기
import { NavLink } from 'react-router-dom';

  <NavLink className={({ isActive }) => (isActive ? 'nav-active' : undefined)} to={'/'}>
    소개
  </NavLink>
  <NavLink className={({ isActive }) => (isActive ? 'nav-active' : undefined)} to={'/best'}>
    대표메뉴
  </NavLink>
  <NavLink className={({ isActive }) => (isActive ? 'nav-active' : undefined)} to={'/couple'}>
    커플메뉴
  </NavLink>

useNavigate()

• 라우터 이동 뿐 아니라,
• 뒤로가기 1번 가기 '-1',
• 앞으로가기 2번가기 '2' 구현 가능.

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

function App(){
  let navigate = useNavigate()
  
  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

---