React Router?

React Router은 React에서 웹 애플리케이션의 라우팅을 관리하기 위한 라이브러리입니다.

웹 페이지에서 라우팅이란 사용자가 서로 다른 경로나 URL을 방문할 때 해당 경로에 맞는 적절한 뷰 혹은 컴포넌트를 보여주는 기능을 의미합니다.

사용자가 웹 사이트의 '홈페이지', '서비스 소개', '연락처' 등 다양한 페이지를 방문할 때마다 적절한 화면을 보여주는 것이 라우팅이고, 이를 React에서 구현할 수 있도록 도와주는 것이 React Router입니다.

React Router를 사용하는 이유

1. 싱글 페이지 애플리케이션(SPA) 구현: React Router를 사용하면, 페이지를 새로 로딩하지 않고도 뷰를 바꿀 수 있습니다. 이는 사용자 경험을 향상시키며, 애플리케이션의 퍼포먼스를 개선하는 데 도움이 됩니다.
2. 코드 분리 및 지연 로딩: React Router를 사용하면, 각 라우트에 대응하는 컴포넌트를 분리하여 코드를 관리할 수 있습니다. 또한, 필요한 라우트의 컴포넌트만 로딩하여 애플리케이션의 초기 로딩 시간을 줄일 수 있습니다.
3. URL을 통한 상태 관리: URL을 통해 애플리케이션의 상태를 관리할 수 있습니다. 이를 통해 사용자가 브라우저의 뒤로 가기, 앞으로 가기 버튼을 사용하거나 즐겨찾기를 통해 특정 상태로 쉽게 돌아갈 수 있습니다.
4. 프레임워크에 종속되지 않은 라우팅: React Router는 React에 종속되지 않은 독립적인 라우팅 라이브러리입니다. 이는 다른 라이브러리나 프레임워크와 함께 사용할 수 있음을 의미합니다.

따라서, React Router는 복잡한 애플리케이션의 라우팅을 효과적으로 관리하고, 사용자 경험을 향상시키는 데 필요한 도구입니다.

Router의 종류

1 ) BrowserRouter

웹 애플리케이션에서 가장 일반적으로 사용되는 라우터입니다. HTML5의 History API를 사용하여 UI를 업데이트합니다.

BrowserRouter는 HTML5의 History API를 사용하여 클린한 URL을 제공합니다. 즉, URL에 해시(#)가 포함되지 않습니다. 이는 사용자에게 보다 친숙하고, SEO에도 유리합니다.

사용자가 직접 URL을 입력하거나 새로고침을 했을 때도 기대하는 페이지를 보여줄 수 있습니다.