[React - Study] react-router-dom 복습

---

SPA : Single Page Application

리액트는 SPA이기 때문에 하나의 index.html 탬플릿 파일을 가지고 있다. 이 하나의 템플릿에 자바스크립트를 이용해서 다른 컴포넌트를 이 index.html 템플릿에 넣으므로 페이지를 변경해주게 된다. 이 때 React-Router-Dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는데 도움을 준다.

• WEB
  • Our React App
    • index.js
      ↕️
    • Router
      ↕️
      - Component 1
      - Component 2
      - Component 3

---

React-Router-Dom 설치

npm install react-router-dom --save
yarn add react-router-dom

---

React-Router-Dom 설정하기

설치가 완료된 후 가장 먼저 할 일은 앱 어디에서나 React Router를 사용할 수 있도록 하는 것
SRC 폴더에서 index.js 파일을 열고 react-router-dom에서 BrowserRouter를 가져온 다음 루트 구성 요소를 그 안에 래핑한다.

ex )

ReactDom.render(
	<React.StrictMode>
    	<App/>
    </React.StrictMode>
    document.getElementById('root')
);

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

ReactDom.render(
	<BrowserRouter>
    	<App/>
    </BrowserRouter>
    document.getElementById('root')
);

---

BrowserRouter

HTML5 History API(pushState, replaceState 및 popState 이벤트) 를 사용하여 UI를 URL과 동기화된 상태로 유지시켜준다.

ex )

localhost:3000/home 으로 들어가면 <Home /> 으로 동기화 시켜준다.

---

여러 컴포넌트 생성 및 라우트 정의하기

function App() {
	return (
    	<div className="App">
        	<Routes>
            	<Route path "/" element={ <Home/> }/>
                <Route path "/about" element={ <About/> }/>
            </Routes>
        </div>
    )
}

<Routes/> : Routes는 앱에서 생성될 모든 개별 경로에 대한 컨테이너/상위 역할을 한다.
<Route/> : Route는 단일 경로를 만드는 데 사용된다. 두 가지 속성을 취한다.

• path : path는 원하는 컴포넌트의 URL 경로를 지정한다. 이 경로 이름을 원하는 대로 정할 수 있다. 위에서 첫 번째 경로 이름이 "/" 앱이 처음 로드될 때마다 먼저 렌더링된다. 이는 홈 구성 요소가 렌더링되는 첫 번째 구성요소가 됨을 의미.
• element : 경로에 맞게 렌더링이 되어야하는 컴포넌트를 지정한다.

---

<Link/> 를 이용하여 경로를 지정

<Link to="about">About 페이지 이동</Link>

Link 구성요소는 HTML의 앵커 요소 <a/>와 유사하다. 그것의 to 속성은 링크가 가는 경로를 지정한다.
앱 구성요소에 나열된 경로 이름을 생성했기 때문에 링크를 클릭하면 경로를 살펴보고 해당 경로 이름으로 구성요소를 렌더링한다.

---

React-Router-Dom APIs

중첩 라우팅 (Nested Routes)

이것은 React Router의 가장 강력한 기능 중 하나이다. 복잡한 레이아웃 코드를 어지럽힐 필요가 없다. 대부분의 레이아웃은 URL의 세그먼트에 연결되며 React Router는 이를 완전히 수용한다.

<BrowserRouter>
	<Routes>
   
    	🔵App 컴포넌트에 Header Footer등 Layout🔵
    	<Route path="/" element={<App/>}>
       
	        🔵localhost:3000/ 경로 => Home 컴포넌트🔵
        	<Route index element={<Home/>}/>
           
            🔵localhost:3000/teams 경로 => Teams 컴포넌트가 Layout🔵
            <Route path="teams" element={<Teams/>}>
           
	            🔵localhost:3000/teams/13 경로 => Teams 컴포넌트🔵
            	<Route path=":teamsId" element={<Team/>}/>
                <Route path-"new" element={<NewTeamForm/>}/>
               
                🔵localhost:3000/teams 경로 => LeagueStandings 컴포넌트🔵
                <Route index element={<LeagueStandings/>}/>
               
            </Route>
        </Route>
    </Routes>
</BrowserRouter>

Outlet

자식 경로 요소를 렌더링하려면 부모 경로 요소에서 <Outlet/>을 사용해야한다. 이렇게 하면 하위 경로가 렌더링될 때 중첩된 UI가 표시될 수 있다. 부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 아무것도 렌더링하지 않는다. React-Router-Dom에서 가져와서 사용한다.

 function App() {
 	return (
    	<div>
	        <h1>Welcome</h1>
	        <nav>
              <Link to="/">Home</Link>
              <Link to="teams">Teams</Link>
        	</nav>
	        <div className="content">
              <Outlet/>
        	</div>
        </div>
    )
 }

App 자체가 위에서 중첩으로 감싸고 있기 때문에 className content에 들어가는 Outlet은 하위 Route요소 들이다.

---

useNavigate

경로를 바꿔준다. navigate("/home") => home 으로 이동

import { useNavigate } from "react-router-dom";

let navigate = useNavigate();

navigate("../success", { replace: true })

useParams

:style 문법을 path 경로에 사용하였다면 useParams() 로 읽을 수 있다.

let params = useParams();

return <h1>Invoice {params.invoiceId(:invoice 로 된 path 값을 가져옴)}</h1>

useLocation

이 Hooks는 현재 위치 객체를 반환한다 .이것은 현재 위치가 변경될 때마다 일부 side effect를 수행하려는 경우에 유용하다.

useRoutes

useRoutes Hooks는 <Routes>와 기능적으로 동일하지만 <Route> 요소 대신 JavaScript객체를 사용하여 경로를 정의한다. 이러한 객체는 일반 <Route>요소와 동일한 속성을 갖지만 JSX가 필요하지 않다.