리액트는 SPA(Single Page Application) 방식을 사용한다. 리액트의 페이지 렌더링에 사용되는 개념인 React-Router 라이브러리에 대해 알아보자.
React-Router-Dom 이란?
React router dom은 React 앱에서 페이지 라우팅을 관리하는 데 사용되는 라이브러리로, 페이지 로딩 없이 페이지에 필요한 컴포넌트를 렌더링하여 화면에 보여준다. 라우팅이 실행 중인 앱 외부에서 처리되는 기존 라우팅 아키텍처와 달리 React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 해준다. 따라서 React Router DOM을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다.
실제로 React Router를 설정하는 과정은 아래와 같다.
먼저 앱 어디서나 react router를 사용할 수 있도록 하기 위해 app.js 에서 구성요소들을 BrowserRouter로 감싸준다.
<BrowserRouter>: 어디서나 react router를 사용할 수 있도록 모든 컴포넌트를 래핑
- HTML5 History API(pushState, replaceState 및 popstate 이벤트)를 사용하여 UI를 URL과 동기화된 상태로 유지
<Routes>: 앱에서 생성될 모든 개별 경로에 대한 상위 컨테이너 역할
- Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링함
*모든 컴포넌트 페이지에서 보여야 하는 페이지(ex. Navbar, Footer 등)는 Routes보다 상위에 적어주어야 한다
<Route>: 개별 컴포넌트의 경로를 생성
- path : 컴포넌트의 URL 경로 지정
*경로 이름이 백 슬래시(/) 인 컴포넌트는 앱이 처음 로드될 때마다 먼저 렌더링됨(홈 컴포넌트가 렌더링되는 첫 번째 구성 요소)
- element : 렌더링되면 보여줄 컴포넌트
Link Component
Link는 React Router 라이브러리에서 제공하는 컴포넌트로, 웹 앱에서 페이지 간의 이동을 가능하게 하는 하이퍼링크 역할을 한다.
즉, Link는 HTML의 앵커 태그(<a />)와 유사하나, 브라우저 전환 시에 전체 페이지가 새로고침 되는 <a/> 태그와 달리 필요한 부분만 동적으로 바꿔주어 브라우저 내 페이지 전환을 부드럽게 처리한다.
Link 컴포넌트의 사용 예시는 다음과 같다.
import { Link } from "react-router-dom";
function App() {
return (
<div className='navbar'>
<nav>
<ul className='nav-menu'>
<li>
<Link to="/">홈</Link>
</li>
<li>
<Link to="/about">소개</Link>
</li>
<li>
<Link to="/contact">문의하기</Link>
</li>
</ul>
</nav>
</div>
);
}
export default App;
위 코드는 홈페이지 상단의 navbar 메뉴를 구현하기 위한 것이다.
보통 홈페이지에서 메뉴 바에서 메뉴를 선택하면, 페이지 전체가 새로고침 되는 것보다 메뉴 바 아랫 부분만 바뀌는 것이 자연스럽다.
Link 컴포넌트에서 'to=' 속성으로 이동하고자 할 경로를 지정하여 이러한 SPA (Single Page Application)에서의 페이지 간 전환을 매끄럽게 할 수 있다.
*추가할 내용
- History API
- SPA 렌더링 방식
*reference
- [인프런] 따라하며 배우는 리액트 A-Z
'React' 카테고리의 다른 글
| React란? - React의 개념과 주요 특징 (0) | 2024.02.05 |
|---|
