React Router Dom에 관하여

오늘은 React Router Dom에 관해서 공부 해볼까 합니다.

 

이런 라이브러리들을 설치 해서 대충 사용 해도 되지만 더욱더 원리와 구조를 이해하면서 공부를 하고 싶어서 
정리를 해보려고 한다.

 

 1. React Router Dom의 기본 개념

 

React Router Dom은 싱글 페이지 애플리케이션(SPA)에서 다중 페이지 애플리케이션처럼 동작하는 라우팅 시스템을 제공한다

사용자가 URL을 변경할 때 페이지를 새로고침하지 않고 컴포넌트를 교체하는 방식이다

 

Route는 경로를 정하다라는 의미이다.

즉 리액트의 경로를 정하는 문서 객체 모델이라는 뜻 임을 알 수 있다.

 

그럼 문서 객체 모델(DOM)이란 무엇일까?

 

DOM(Document Object Model)

웹 문서의 구조화 된 표현

프로그래밍 언어가 웹 페이지 내의 객체에 접근하고 조작할 수 있게 하는 인터페이스로 동작한다고 한다

 

Tree 형태로 이루어진 문서라고 보면 된다.

 

특징

• 트리구조: DOM은 트리 구조로 이루어져 있고, 각 노드는 웹 페이지의 다양한 부분를 나타낸다
• 실시간: DOM은 실시간으로 변경사항을 웹 페에지에 반영된다.

 

그러나 React는 동적인 DOM의 변경을 위해 가상 DOM이라는 것을 추가로 사용하는데

가상 DOM (Virtual DOM)이란 실제 DOM의 복사본이고 메모리 상에 존재하는 JSON 형태의 트리구조로 이루어져 있다.

UI에 변경 사항을 가상 DOM에 먼저 적용한 후 실제 DOM과 비교하여 변경된 부분을 반영하는 Diffing 알고리즘으로 되어 있다.

이 가상 DOM이 React의 핵심이고 동적 UI를 그릴 수 있다.

 

 

그럼 SPA(Single Page Application) 싱글 페이지 애플리케이션은  또 뭘까

하나의 페이지에서 (사용자의 상호작용, URL 주소 등)에 따라 동적으로 현재의 경로에 필요한
DOM 구조를 다시 작성한다고 보면 된다.  

 

 

만약 당신의 웹 애플리케이션 서비스에 중복되는 Header, Footer 같은 컴포넌트가 있다면

동일한 host 내에서 굳이 새롭게 렌더링 할 필요가 있겠는가? 

그래서 하나의 페이지에 Tree 구조에 사용자가를  path를 이동한다면 

path에 맞는 Content 컴포넌트 영역만을 다시 렌더링 하는게 좋아보인다

 

 

만약 jsp나 php만을 사용해서 웹 애플리케이션을 만든다고 생각해보자  
home.php, login.php, signup.php 등 각 페이지를 하나씩 만들 것이다.

header.php를 따로 만들어서 include나 require를 한다고 해도 브라우저는 
매번 페이지 전체를 재 렌더링 할 것이다.

벌써 페이지 3개가 넘어가니 이 방법은  MPA(multi page application)이 아니겠는가?

 

 

그래서 React Router Dom은 현재 url의 path에 따라 그에 알맞는 컴포넌트을 다시 그려주는 라이브러리라고 보면 된다.

 

 

 

2. 주요 컴포넌트 및 API 분석

<BrowserRouter basename="/app" >
  {/* 라우트 정의 */}
</BrowserRouter>

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/users/:id" element={<UserProfile />} />
  <Route path="*" element={<NotFound />} />
</Routes>

 

Routes는 현재 위치와 일치하는 첫 번째 Route를 찾아 렌더링합니다. Route는 URL 경로와 렌더링할 컴포넌트를 연결합니다.

 

Route 주요 속성:

• path: 매칭할 URL 패턴 (예: "/users/")
• element: 매칭 시 렌더링할 React 엘리먼트
• caseSensitive: 경로 매칭을 대소문자 구분할지 여부 (기본값: false)

 

Link 및 NavLink

<Link to="/about" replace state={{ from: 'home' }}>About</Link>
<NavLink to="/profile" className={({ isActive }) => isActive ? 'active-link' : ''}>Profile</NavLink>

 

Link 주요 속성:

• to: 링크 대상 경로 (문자열 또는 객체)
• replace: true일 경우 새 히스토리 항목을 추가하는 대신 현재 항목을 대체함
• state: 대상 위치에 전달할 상태 객체
• reloadDocument: true일 경우 전체 페이지 새로고침을 강제함

NavLink 역할: Link와 동일하지만 현재 경로와 링크 경로가 매칭될 때 스타일 지정 기능이 추가된 컴포넌트입니다.

NavLink 추가 속성:

• className: 활성 상태 여부를 인자로 받는 함수 또는 문자열
• style: 활성 상태 여부를 인자로 받는 함수 또는 스타일 객체
• end: true로 설정하면 자식 경로가 활성화되어도 부모 링크는 활성화되지 않음