리엑트 라우팅 시스템

라우팅 시스템은 웹사이트에서 URL 경로에 따라 다른 페이지를 보여주는 시스템이다.

즉, 웹 사이트의 네비게이션을 관리하는 핵심 시스템으로, 사용자가 어떤 URL에 접속하든지, 그에 맞는 적절한 페이지를 보여주고, 브라우저의 기본 기능들(뒤로가기, 북마크, URL 공유)를 활용할 수 있게 해준다.

 

예를 들면

• www.example.com/ → 홈페이지

• www.example.com/about → 회사소개 페이지

• www.example.com/contact → 연락처 페이지

 

라우팅 시스템을 사용하는 이유

1. 사용자 경험 (UX) 향상 : 각 페이지가 독립적으로 관리된다.

- 페이지 새로고침 없이 부드러운 전환

- URL을 통한 직접 접근 가능

- 브라우저 히스토리 활용

// ❌ 라우팅 없이 (모든 페이지가 하나의 긴 페이지)
function App() {
  return (
    <div>
      {currentPage === 'home' && <HomePage />}
      {currentPage === 'about' && <AboutPage />}
      {currentPage === 'contact' && <ContactPage />}
    </div>
  );
}

// ✅ 라우팅 사용 (각 페이지가 독립적)
// 각 페이지마다 고유한 URL (/, /about, /contact)
function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
      <Route path="/contact" element={<ContactPage />} />
    </Routes>
  );
}

 

2. 브라우저 기능 활용 가능

-  뒤로가기/앞으로가기 버튼 작동

- 북마크 저장 가능

- URL 공유 가능

- 새로고침 시에도 같은 페이지 유지

 

 

3. SEO (검색엔진 최적화)

// 각 페이지마다 고유한 URL
/about → 회사소개 페이지
/products → 제품 페이지
/contact → 연락처 페이지

// 검색엔진이 각 페이지를 독립적으로 인덱싱

 

4.보안 (조건부 렌더링)

// 로그인 상태에 따라 다른 페이지 보여주기
{!authenticatedUser && (
  <Route path="/" element={<LoginPage />} />
)}

{authenticatedUser && (
  <Route path="/" element={<Dashboard />} />
)}

 

 

 

라우팅 시스템 기본 문법

• <Route path="/about" element={<AboutPage />} />
  • path: URL 경로 (/about)
  • element: 보여줄 컴포넌트 (<AboutPage />)