[React] SPA

sywoo0109·2023년 7월 10일
0

React

목록 보기
2/7
post-thumbnail

1. SPA

  기존의 웹 페이지는 멀티페이지 어플리케이션으로 사용자가 웹 사이트 내의 다른 페이지로 이동하면 페이지 전체를 다시 로드하는 방식으로 구현되어 있었다. 웹 사이트가 점차 복잡해지기 시작함에 따라 사용자와 서비스 사이의 상호작용은 더 많아지게 되었는데 그때마다 예를 들어 Header나 Navigation Bar처럼 중복되는 요소를 매번 불러와야 되기 때문에 서버와 불필요한 트래픽이 발생gotj 더 느려지게 되었다. 이런 상황을 해결하기 위해 초기에 한 번 페이지를 로드한 뒤부터는 새로운 페이지를 가져오지 않고 필요한 데이터를 비동기적으로 로드하고 동적으로 업데이트 하는 전략이 등장했으니 그것이 바로 SPA이다. SPA는 Single Page Application의 줄임말로 사용자와 상호작용을 통해 필요한 부분만 동적으로 로드해서 콘텐츠를 갱신하는 웹 어플리케이션을 의미한다. 사용자의 요청에 빠르게 동작하면서 서버의 과부하는 줄일 수 있다는 장점 때문에 최근에는 많은 웹 어플리케이션이 이런 SPA 아키텍처를 기반으로 설계되어 있다. 한편, 브라우저는 첫 로딩 시에 HTML 파일을 읽어들인 후에 거기에 script 요소에 연결된 자바스크립트 파일을 받아오게 되는데 SPA의 경우 HTML 파일은 거의 비어있고 그만큼 자바스크립트 파일의 크기가 필연적으로 크기 때문에 첫 화면의 로딩 시간이 길어진다. 또한 HTML 파일에는 별다른 내용이 없다보니 검색 엔진에서 충분히 자료를 수집하지 못하기 때문에 검색 엔진 최적화 측면에서도 문제가 지적된다. 최근에는 이런 초기 로딩 시간 문제와 검색 엔진 최적화 부족 문제를 해결하기 위한 방법들이 대두되고 있는데 하나의 포스트에서 전부 다룰 수는 없어서 나중에 따로 다루려고 한다.

  리액트 섹션에서 이 SPA에 대해 다루는 것은 바로 리액트가 SPA를 구현하기에 아주 적절한 라이브러리이기 때문이다. 어플리케이션의 경로를 관리할 수 있는 라우터 라이브러리가 제공되고 있으며 컴포넌트 방식으로 조합해서 페이지를 구성해나가기 때문에 필요한 부분만 로딩하기에도 적절하고 가상 DOM을 활용해서 변경된 부분만 실제 DOM에 반영하기에도 용이하다. 또한 필요한 데이터만 비동기적으로 로딩하기 위한 메서드들이 있으며 내장된 기능을 사용하거나 혹은 관련 라이브러리를 사용해서 컴포넌트들의 상태를 관리하고 공유하기도 쉽다.

2. Router

  SPA를 실제로 구현하기 위해선 어떤 것들이 필요할까? 컴포넌트를 어떻게 나누고 그것을 어디에 배치할지에 대한 사전 계획이나 데이터를 어떻게 필요한 컴포넌트들끼리 유기적으로 주고받을 수 있는 구조도 중요하지만 기술적으로는 라우터 기능을 사용할 수 있어야 한다. 라우터란 웹 어플리케이션에서 사용자의 요청에 따라 경로와 컴포넌트를 매핑하는 기능을 제공하는 개념이다. SPA는 하나의 페이지로 구성된 것이지 한 종류의 화면만 사용하는 것은 아니다. 제공하는 기능에 따라 여러 화면이 필요하고 이 화면에 따라 주소를 달리하게 되는데 라우터는 이 다른 주소에 따라 다른 화면을 보여주는 역할을 하는 것이다. 리액트에서 라우터를 사용하려고 할 때는 보통 React Router라는 라이브러리를 주로 사용하게 된다.

  일단 React Router 라이브러리도 리액트의 내장 기능은 아니기 때문에 따로 설치하고 사용할 때 import해야 한다. React Router 라이브러리의 주요 컴포넌트는 크게 3가지로 나눌 수 있는데 라우터의 역할을 하는 BrowserRouter, 경로를 매칭하는 Routes와 Route, 경로를 변경하는 Link가 있다.

  위의 예시에서 라우터를 구성하는 기본 구조에 대해서 확인할 수 있다. 우선 BrowserRouter는 라우터를 적용시킬 태그들의 최상위에 위치해야 하며 History API를 사용하여 URL 경로를 관리하며, 주소 표시줄의 변화를 감지하여 해당하는 컴포넌트를 렌더링하는 역할을 하고 있다. 다음 Route는 특정 경로에 해당하는 컴포넌트를 렌더링 하는 역할을 하며 Routes는 여러 Route 컴포넌트를 담고있는 컨테이너의 역할을 한다. Route의 path 속성에는 경로를, element 속성에는 해당 경로에 대응하는 컴포넌트를 전달한다. 마지막으로 Link 컴포넌트는 사용자가 상호작용을 할 수 있는 링크를 생성하며 to 속성은 링크할 경로를 지정하는 역할을 한다. 예시에서 Link 컴포넌트를 눌러본다면 브라우저의 새로고침 없이도 밑의 요소들이 전환되고 있는 것을 볼 수 있다.

0개의 댓글

관련 채용 정보