⭐Routing
🪐Routing이란?
웹 애플리케이션에서 라우팅은 사용자가 요청한 URL을 해당하는 페이지나 컴포넌트로 연결하는 과정입니다. 이를 통해 웹 애플리케이션은 다양한 페이지를 구성하고 사용자에게 적절한 콘텐츠를 제공할 수 있습니다. 라우팅은 사용자가 웹 애플리케이션 내에서 다른 URL로 이동하거나 특정 액션을 수행할 때 해당하는 컴포넌트를 동적으로 로드하고 렌더링합니다.
-chatGPT
🪐react-router-dom
React Router DOM은 React를 사용하여 웹 애플리케이션에서 라우팅을 구현하기 위한 라이브러리입니다. React Router DOM은 React Router의 DOM 버전으로, 웹 브라우저에서의 라우팅을 처리하는 기능을 제공합니다.
-chatGPT
React는 SPA이기 때문에 하나의 index.html 템플릿 파일을 가지고 있다.이 하나의 템플릿에 JS를 이용해서 다른 컴포넌트를 index.html 템플릿에 넣음으로써 페이지를 변경한다. 이 때 react-router-dom이 새로운 컴포넌트로 라우팅/탐색을 하고 렌더링을 하는데에 도움을 준다.
🌠react-router-dom 설치
npm install react-router-dom --save
🌠react-router-dom 설정
- BrowserRouter로 root component 감싸주기
index.js 파일이다.
🌈BrowserRouter
- 여러 컴포넌트 생성 및 라우트 정의하기
위 사진처럼 라우트를 정의한다.
path는 url을 지정하는 속성이고 element는 일치하는 URL 경로에 대한 처리로 렌더링할 컴포넌트를 지정한다.
위에서부터 순서대로
http://localhost:3000/
http://localhost:3000/about
http://localhost:3000/contact 로 url이 정의되고 각각의 컴포넌트들이 매핑된다.
⭐react-router-dom 개념
🪐Routes, Route 컴포넌트
Routes 컴포넌트는 앱에서 생성될 모든 개별 경로에 대한 Container, 상위 역할을 한다. Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링한다.
위 그림에서 여러 Route는 개별 경로를 의미하며 Routes는 모든 개별 경로 즉, 모든 Route들을 감싸고 있다. 이 중에서 Routes는 첫번째 Route를 기본적으로 렌더링해준다.
Route는 단일 경로를 만들며 두 가지 속성을 가진다. path로 경로 지정, element로 경로에 맞게 렌더링되어야 하는 컴포넌트를 지정한다.
🪐Nested Routes (중첩 라우팅)
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="admin" element={<AdminPanel />}>
<Route index element={<Dashboard />} />
<Route path="users" element={<UserManagement />} />
</Route>
<Route path="user" element={<UserPanel />}>
<Route index element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>
</Route>
<Route path="login" element={<Login />} />
<Route path="404" element={<NotFound />} />
<Route path="*" element={<Navigate to="/404" />} />
</Routes>위는 일반적으로 사용되는 routing 구조이다. 하나의 Routes component 내에 많은 Route들이 존재함을 알 수 있다. 이론대로 Routes는 첫번째 Route component인 Layout을 렌더링하고 위 예제는 nested routes이므로 그 하위에 index 속성을 가지고 있는 Home component도 같이 렌더링한다.
좀 더 살펴보면 /admin으로 사용자가 요청을 보내면 Layout 컴포넌트 위에 AdminPanel 컴포넌트가 쌓이고 그 위에 index 속성을 가진 Dashboard 컴포넌트가 렌더링된다.
기본 경로인 /는 home을 보여주고 그 외에 nested routes가 아닌 컴포 route인 login, 404 컴포넌트들은 각각 /login, /404로 매핑된다. *는 그 외의 경로들을 의미하며 Navigate to="/404"를 통해서 404 페이지로 이동한다.
🪐Outlet 컴포넌트
자식 경로 요소를 렌더링하려면 부모 경로에서 Outlet을 사용해야 한다. 이렇게 하면 하위 경로가 렌더링될 때 부모 경로 위에 중첩되게 UI가 표시될 수 있다. 부모 Route가 정확히 일치하면 자식 index route를 렌더링하고 index route가 없으면 아무것도 렌더링하지 않는다.
🪐Link 컴포넌트
현재 페이지에서 다른 페이지로 이동하기 위한 컴포넌트이다. html에서 앵커 요소(a 태그)와 유사하다. to 속성으로 이동하기 위한 경로(path)를 지정한다.
🪐useNavigate
경로를 바꿔준다. navigate('/home') ==> localhost:3000/home 으로 이동한다.
🪐useLocation
useLocation은 React Router DOM에서 제공하는 훅 함수입니다. 이 훅 함수를 사용하면 현재 URL의 정보를 가져올 수 있습니다.
-chatGPT
import { useLocation } from 'react-router-dom';
function MyComponent() {
const location = useLocation();
console.log(location.pathname); // 현재 URL의 경로를 출력
return (
<div>
{/* 컴포넌트 내에서 현재 URL 정보를 활용하여 작업 수행 */}
</div>
);
}
🪐추후에 더 많은 컴포넌트들을 리뷰할 예정
