[React] React Router Dom

👤'Single Page Application [SPA]'

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

'리액트'에서 여러 개의 페이지 만들려면❓

💁‍♀️React Router Dom🔥

사용하면 웹 앱에서 동적 라우팅을 구현할 수 있음❗
라우팅이 실행 중인 앱 외부의 구성에서 처리되는
기존 라우팅 아키텍처와 달리 React Router Dom은
앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 함

📥설치하기

npm install react-router-dom

👊사용 방법

1 ) BrowserRouter로 감싸주기

2 ) Routes 컴포넌트로 감싸주기

3 ) Route를 생성

BrowserRouter
👉 HTML5 History API(pushState, replaceState 및 popstate 이벤트)를
사용하여 UI를 URL과 동기화된 상태로 유지해줌

HTML5의 History API 사용하여 페이지
새로고침 하지 않고도 주소 변경할 수 있도록 해줌
이걸 클릭했다고 가정했을 때
페이지가 완전 리플레쉬 되면서 이동을 하게 됨
리액트에서의 문제점은 가지고 있는 state가 초기화 됨
갖고 있는 state는 유지해줘야 함

Routes
앱에서 생성될 모든 개별 경로에 대한 컨테이너/상위 역할을 함
Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링해줌

Route
단일 경로 만드는 데 사용됨 ( 두가지 속성을 취함 )
path : 원하는 컴포넌트의 URL 경로를 지정
이 경로는 이름을 원하는 대로 정할 수 있음
첫번째 경로 이름이 백슬래시(/)임을 알 수 있음
경로 이름이 백슬래시인 컴포넌트는 앱이
첨 로드될 때마다 먼저 렌더링 됨
이는 홈 구성 요소가 렌더링되는 첫 번째 구성 요소가 됨을 의미

React Router Dom APIs

▶ 중첩 라우팅 [Nested Router]

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

localhost:3000/ 여기로 접근했다고 했을 때
위에서 어떠한 컴포넌트가 렌더링 될까❓

실행하면 App/Home 두 개의 컴포넌트가 렌더링 됨
( index➡path를 가져옴 )

localhost:3000/teams
👉 App & Teams
여기서 Team은 1.2.3.4... 여러 개의 Team이 있을거임
:teamId는 다이나믹하게 팀의 id가 올 거라는 것
👉 localhost:3000/teams/7 ( 이런 식으로 teams 뒤에 올 것 )
실행하면 App & Teams & Team이 렌더링 됨
NewTeamForm이 렌더링 되려면 어떠한 경로로 접근해야 할까❓
👉 localhost:3000/teams/new

▶ Outlet

자식 경로 요소 렌더링하려면❓
👉 부모 경로 요소에서 Outlet 태그 사용해야 함❗
이렇게 하면 하위 경로가 렌더링될 때 중첩된 UI 표시될 수 있음
부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링하거나
인덱스 라우트가 없으면 아무것도 렌더링 하지 않음🙅‍♀️
react-router-dom에서 가져와서 사용🔥

▶ useNavigate

경로 바꿔줌 navigate('/home') ===> localhost:3000/home으로 감

react-router-dom에서 제공하는 함수❗
함수인데 함수를 생성하는 함수😎

▶ useParams

useParams Hooks➡Route path와 일치하는
현재 URL에서 동적 매개변수의 키/값 쌍 객체를 반환🔁
:style 문법을 path 경로에 사용했다면 useParams( )로 읽을 수 있음
아래는 :invoiceId가 무엇인지 알기위해 useParams를 사용했음

▶ useLocation

이 Hooks 이용해서 현재 URL 정보 가져올 수 있음
👉 현재 위치 객체를 반환🔁
이것은 현재 위치 변경될 때마다 일부
side effect 수행하려는 경우에 유용할 수 있음

▶ useRoutes

useRoutes Hooks와 와 기능적으로 동일하지만
요소 대신 JS 객체를 사용하여 경로를 정의
이러한 객체는 일반 요소와 동일한 속성 갖지만 JSX 필요하지 않음왼쪽 처럼 만들 수도 있고 오른쪽 처럼 만들 수도 있음 (선택해서 사용)