React Router 기본 개념
React Router는 React 애플리케이션에서 싱글 페이지 애플리케이션(SPA)의 라우팅을 관리하는 라이브러리입니다. BrowserRouter, HashRouter, MemoryRouter 등과 함께 사용되며, 각각의 특성에 따라 사용 목적에 맞게 선택할 수 있습니다. Route 컴포넌트를 사용하여 경로와 해당 경로에 대응하는 컴포넌트를 정의하며, Switch 컴포넌트를 사용하여 첫 번째로 일치하는 경로만 렌더링하도록 설정할 수 있습니다.
Link 컴포넌트를 활용한 내비게이션
Link 컴포넌트는 React Router에서 제공하는 링크 컴포넌트로, 앱 내에서 다른 경로로 이동하는 데에 사용됩니다. HTML의 앵커 태그(a 태그) 대신 사용되며, 페이지를 새로고침하지 않고도 컨텐츠를 업데이트할 수 있습니다. 이를 통해 사용자가 원하는 페이지로 빠르게 접근하고, 애플리케이션의 내비게이션을 보다 효율적으로 관리할 수 있습니다.
Server-Side Rendering (SSR)
싱글 페이지 애플리케이션(SPA)은 초기 로딩 시점에 모든 컨텐츠를 미리 가져오지 않기 때문에, 검색 엔진 최적화에 어려움이 있을 수 있습니다. 이를 해결하기 위해 서버 사이드 렌더링(Server-Side Rendering, SSR)을 적용합니다.