안동민 개발노트

"React 라우팅 기초"에서는 웹 애플리케이션의 핵심적인 기능 중 하나인 라우팅(Routing) 에 대해 알아보겠습니다.

그 첫 단계로, 현대 웹 애플리케이션 개발의 대세가 된 SPA(Single Page Application, 단일 페이지 애플리케이션) 의 개념을 이해하는 시간을 갖겠습니다. 리액트와 같은 프레임워크가 SPA 개발에 최적화된 이유를 알게 될 것입니다.

MPA(Multi Page Application)의 이해

SPA를 이해하기 위해서는 먼저 전통적인 웹 애플리케이션 방식인 MPA(Multi Page Application, 다중 페이지 애플리케이션) 에 대해 알아볼 필요가 있습니다.

MPA는 우리가 오랫동안 사용해 온 웹사이트의 기본적인 형태로, 다음과 같은 특징을 가집니다.

페이지 이동 시 전체 페이지 새로고침: 사용자가 다른 페이지로 이동할 때마다 서버로부터 완전히 새로운 HTML 문서를 받아와 브라우저 전체를 새로고침합니다.
각 페이지가 독립적인 HTML 파일: 웹사이트의 각 페이지(예: 소개 페이지, 제품 목록 페이지, 문의하기 페이지)는 서버에 별도의 HTML 파일로 존재합니다.
서버 사이드 렌더링(SSR) 위주: 일반적으로 서버에서 페이지에 필요한 모든 데이터를 가져와 HTML을 완성한 후 클라이언트로 전송합니다.

MPA의 장점

SEO(검색 엔진 최적화) 유리: 각 페이지가 독립적인 HTML 파일을 가지므로, 검색 엔진 크롤러가 사이트의 모든 페이지를 쉽게 색인(index)할 수 있습니다.
초기 로딩 속도: 첫 페이지 로딩 시 필요한 모든 콘텐츠를 서버에서 받아오므로, 첫 페이지를 빠르게 볼 수 있습니다. (그러나 이후 페이지 이동 시마다 새로고침으로 인한 지연 발생)
개발 용이성(초기): 비교적 단순한 구조로, 소규모 웹사이트나 정보 전달 위주의 웹사이트에 적합합니다.

MPA의 단점

느린 페이지 전환: 페이지를 이동할 때마다 전체 페이지를 새로 로드해야 하므로, 불필요한 리소스(CSS, JS 등)도 다시 다운로드하게 되어 사용자 경험이 저하될 수 있습니다.
서버 부하 증가: 모든 페이지 요청마다 서버에서 HTML을 생성하여 전송해야 하므로, 서버에 더 많은 부하가 발생할 수 있습니다.
사용자 경험 저하: 페이지 전환 시 화면이 깜빡이는 현상이 발생하고, 애플리케이션처럼 부드러운 전환 효과를 구현하기 어렵습니다.

SPA는 MPA의 단점을 극복하기 위해 등장한 현대 웹 애플리케이션 개발 방식입니다. 이름에서 알 수 있듯이, 하나의 HTML 페이지(단일 페이지) 를 기반으로 동작합니다.

초기 로딩 시 한 번만 HTML 로드: 웹 애플리케이션에 접속하면 서버로부터 단 하나의 HTML 파일과 필요한 JavaScript, CSS 리소스들을 한 번에 모두 또는 필요한 만큼만 미리 로드합니다.
클라이언트 사이드 렌더링(CSR) 위주: 이후 페이지 이동은 서버에 새로운 HTML을 요청하는 대신, JavaScript를 사용하여 브라우저에서 동적으로 콘텐츠를 변경하고 필요한 데이터만 API를 통해 비동기적으로 가져옵니다.
브라우저의 히스토리 API 활용: 실제 페이지 이동 없이 URL만 변경하고 브라우저의 뒤로 가기/앞으로 가기 기능을 활용할 수 있도록 합니다.

SPA의 장점

향상된 사용자 경험 (UX): 페이지 이동 시 전체를 새로고침 하지 않아 화면 깜빡임이 없고, 필요한 부분만 빠르게 업데이트되므로 데스크톱 애플리케이션처럼 부드러운 전환과 빠른 반응 속도를 제공합니다.
효율적인 리소스 활용: 한 번 다운로드한 리소스(JS, CSS)는 재사용하며, 페이지 이동 시에는 필요한 데이터만 비동기적으로 가져오므로 네트워크 트래픽을 절약하고 로딩 시간을 단축합니다.
개발 생산성 향상
- 프론트엔드-백엔드 분리: 백엔드는 RESTful API 또는 GraphQL API만 제공하고, 프론트엔드는 이 API를 사용하여 데이터를 가져와 UI를 렌더링합니다. 각 팀이 독립적으로 개발하고 배포할 수 있어 협업 효율이 증가합니다.
- 모듈화된 컴포넌트 개발: 리액트와 같은 라이브러리는 컴포넌트 기반으로 UI를 구축하므로, UI 재사용성과 유지보수성이 뛰어납니다.
모바일 앱 개발 용이: 웹 앱과 모바일 앱 간에 많은 로직을 공유할 수 있어, 하이브리드 앱 개발 등에 유리합니다.

SPA의 단점

SEO 불리: 초기 HTML에는 실제 콘텐츠가 거의 없기 때문에, 검색 엔진 크롤러가 콘텐츠를 제대로 색인하기 어려울 수 있습니다. (최근에는 검색 엔진 기술이 발전하여 많이 개선되었지만, 여전히 MPA 방식보다 SEO에 불리할 수 있음)
- 이를 해결하기 위해 SSR(Server Side Rendering), SSG(Static Site Generation) 와 같은 기법(Next.js 등 프레임워크 활용)을 함께 사용하기도 합니다.
초기 로딩 속도: 모든 JavaScript 리소스를 한 번에 다운로드해야 하므로, 초기 로딩 시간이 MPA보다 길어질 수 있습니다. (코드 스플리팅, 레이지 로딩 등으로 개선 가능)
메모리 누수 가능성: 긴 시간 동안 페이지가 유지되면서 제대로 관리되지 않은 DOM 조작이나 이벤트 리스너 등으로 인해 메모리 누수가 발생할 가능성이 있습니다.
보안 취약점: 클라이언트 측에서 모든 로직이 처리되므로, XSS(Cross-Site Scripting)와 같은 클라이언트 측 보안 취약점에 더 취약할 수 있습니다.

리액트(React)는 컴포넌트 기반의 UI 라이브러리로, SPA 개발에 최적화되어 있습니다.

선언적 UI: 리액트는 상태(state)가 변경되면 UI를 효율적으로 업데이트하므로, 페이지 전체를 새로고침하지 않고도 동적인 UI 변화를 쉽게 구현할 수 있습니다.
가상 DOM (Virtual DOM): 실제 DOM을 직접 조작하는 대신, 가상 DOM을 사용하여 변경된 부분만 효율적으로 실제 DOM에 반영하여 성능을 최적화합니다.
컴포넌트 재사용성: UI를 작은 단위의 컴포넌트로 분리하여 개발하고, 이 컴포넌트들을 조합하여 전체 애플리케이션을 구축합니다. 이는 SPA의 동적인 콘텐츠 변화에 매우 적합합니다.

리액트로 SPA를 개발할 때는 브라우저의 URL이 변경될 때 어떤 컴포넌트를 렌더링할지 결정하는 메커니즘이 필요한데, 이것이 바로 다음 장에서 배울 라우팅입니다.

"SPA 이해"는 여기까지입니다. 이 장에서는 전통적인 MPA 방식과 현대적인 SPA 방식의 개념, 각각의 장단점을 비교하여 SPA가 왜 현대 웹 개발의 주류가 되었는지, 그리고 리액트가 SPA 개발에 어떻게 기여하는지 이해하는 시간을 가졌습니다.

이제 SPA의 기본 개념을 파악했으니, 다음 장에서는 리액트 프로젝트에서 SPA의 페이지 이동 기능을 구현하는 핵심 라이브러리인 React Router의 기본적인 사용법에 대해 알아보겠습니다.