한 줄씩 천천히 정리합니다.

3 분 소요

React Router Dom

React Router DOM은 React 애플리케이션에서 CSR(Client-Side Routing)을 구현하기 위한 라이브러리다.

일반적인 웹 애플리케이션은 SSR(Server Side Rendering)을 통해서 사용자가 요청한 URL에 맞는 페이지를 서버에서 렌더링하여 제공한다.

하지만 React Router DOM을 사용하면 서버에 매번 요청할 필요 없이 브라우저에서 클라이언트 사이드 렌더링(CSR, Client Side Rendering)을 통해 동적으로 페이지를 전환할 수 있다.

이는 SPA(Single Page Application) 방식으로, 전체 페이지를 새로고침하지 않고 필요한 부분만 업데이트하여 사용자에게 빠르고 부드러운 UI 경험을 제공한다.


CSR과 SPA 두 개념은 많이 연관되어 있긴 하지만, 서로 다른 개념이다. 웹 애플리케이션의 렌더링 방식과 구조에서 중요한 차이점을 가지고 있다.

CSR

CSR(Client Side Rendering): 페이지의 렌더링을 클라이언트(브라우저)에서 처리하는 방식을 말한다.

사용자가 웹사이트에 접속하려고 브라우저에 요청을 보내면, 클라이언트는 CDN으로부터 최소한의 HTML 파일과 JS 파일의 링크를 전달받는다.

여기서 CDN은 사용자와 가까운 서버에서 해당 파일을 제공하여 빠른 응답을 보장한다. 클라이언트는 HTML과 JS를 다운로드한다.

이 시점에서 사용자 화면에 아무것도 표시되지 않는다 (SSR과의 차이점). 다운로드가 완료되면, 브라우저가 JS 파일을 실행하고 필요한 데이터를 가져오기 위해 API 요청을 보낸다.

이때 사용자는 아직 데이터가 없는 상태이다. 서버가 요청에 응답하고, 필요한 데이터를 클라이언트에 전달한다. 받아온 데이터는 페이지에 렌더링되어 사용자와 상호작용을 할 수 있게 된다.

이 과정을 통해 CSR 방식에서는 처음에 초기 로드가 느리며 빈 페이지가 노출되지만, 이후엔 페이지를 돌아다니며 로드되는 과정이 필요없어 사용자 경험이 좋아진다.

SPA

SPA(Single Page Application): 하나의 HTML 페이지로 구성된 웹 애플리케이션으로, 사용자가 여러 페이지를 이동할 때 페이지를 새로고침하지 않고 필요한 데이터만 비동기적으로 로드하여 화면을 업데이트한다. SPA는 주로 CSR 방식을 사용하지만, CSR 자체가 SPA를 의미하는 것은 아니다.

SPA는 기본적으로 CSR을 (렌더링 방식) 활용하여 페이지 전환 시 전체 페이지를 새로 고치지 않고, 현재 페이지의 일부만 업데이트하는 구조다. 사용자는 부드럽고 연속적인 경험을 하게 된다.

결론적으로, CSR은 클라이언트에서 렌더링을 처리하는 방식이고, SPA는 이러한 CSR 방식을 활용하여 사용자가 매끄럽고 연속적인 경험을 할 수 있도록 설계된 애플리케이션이다. CSR은 SPA를 지원하는 렌더링 방법 중 하나로, 둘은 서로 다른 개념이지만 밀접한 관계를 가지고 있다.

사용하기 전과 후

  • 사용 전: React는 기본적으로 컴포넌트를 기반으로 UI를 구성하는데, URL에 따라 다른 페이지를 보여주려면 직접 상태를 관리하거나, 페이지 전환 로직을 수동으로 작성해야 한다. 그래서 복잡해지기 쉽고, 비효율적일 수 있다.

  • 사용 후: React Router DOM을 사용하면 URL 경로와 컴포넌트를 쉽게 연결할 수 있어, 페이지 전환을 간단하게 처리할 수 있다. 링크를 클릭하면 그에 맞는 경로로 이동하고, 지정된 컴포넌트를 렌더링해준다. 사용자는 전체 페이지를 새로고침하지 않고도 새로운 페이지를 보는 것 같은 느낌을 받을 수 있는 거다.

기본 구성 요소

  • Route: 특정 경로에 대해 렌더링할 컴포넌트를 지정하는 컴포넌트. 경로가 매치되면 해당 컴포넌트를 렌더링한다.

  • Routes: 모든 Route의 상위 경로에 존재해야 하며, location 변경 시 하위에 있는 모든 Router를 조회하여 현재 경로와 맞는 Route를 찾아준다. (v6)

  • Switch: 자식 Route 중 하나와 매칭되는 첫 번째 Route를 렌더링하는 컴포넌트. 여러 Route를 그룹화하여 사용한다. (v5)

  • Link: 사용자가 클릭할 수 있는 링크를 생성하는 컴포넌트. 페이지를 새로 고치지 않고 URL을 변경할 수 있도록 해준다.

  • NavLink: Link와 비슷하지만, 현재 경로와의 일치 여부에 따라 스타일을 적용할 수 있다.

  • BrowserRouter: HTML5의 History API를 사용하여 클라이언트 사이드 라우팅을 관리하는 라우터다. 보통 애플리케이션의 최상위 컴포넌트를 감싸는 형태로 사용한다. 이를 통해 URL을 변경하더라도 페이지를 새로고침하지 않고 라우팅이 가능하다. 방문한 URL 기록을 STACK 처럼 관리하여 브라우저의 앞/뒤로 가기 버튼을 사용해 이전 경로로 쉽게 이동할 수 있다.

  • History: history 객체는 브라우저의 window.history와 유사하게 동작하지만, 프로그래밍적으로 주소 이동을 제어할 수 있는 기능을 추가로 제공한다. 경로와 상태를 관리하며, history.push(), history.replace() 등의 메서드를 통해 특정 경로로 이동하거나 현재 경로를 대체할 수 있다.

BrowserRouter: 애플리케이션의 최상위에서 클라이언트 사이드 라우팅을 담당하는 컨테이너 역할
History: 실제로 URL 이동과 상태를 조작하는 기능적인 도구

이 외에도 React Router DOM의 다양한 기능과 장점이 있으며, 애플리케이션의 요구사항에 맞게 커스터마이즈하여 사용할 수 있다.

Routing

라우팅(Routing)은 네트워크 및 웹 애플리케이션에서 특정 경로를 따라 사용자를 목적지로 안내하는 프로세스다. 서버 사이드에서 라우팅은 주로 서버에서 요청을 수신하고, 해당 요청을 처리할 코드나 페이지로 전달하는 역할을 한다. 반면 클라이언트 사이드 라우팅은 자바스크립트와 같은 프론트엔드 기술을 사용해 페이지 이동을 제어하여, 브라우저가 새로고침 없이도 URL 변경과 페이지 이동을 처리할 수 있도록 돕는다. 이를 통해 사용자는 앱을 보다 빠르고 매끄럽게 이용할 수 있다.

이러한 라우팅 시스템은 URL 구조를 잘 설계할수록 사용자가 직관적으로 접근하고 탐색할 수 있으며, SEO(검색 엔진 최적화)와 같은 측면에서도 긍정적인 효과가 있다.

참고