SPA(Single Page Application)이란

React로 프로젝트를 진행하며 SPA(Single Page Applictaion)에 대한 이해가 필요했다.

기존의 방식

전통적인 웹의 구조는, 여러 페이지로 구성되어있다. 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 하게된다. HTML 파일, 혹은 템플릿 엔진 등을 사용해서 어플리케이션의 뷰가 어떻게 보여질지도 서버가 결정했다.

SPA

단일 페이지 어플리케이션은 브라우저에 로드되고 난 뒤에 페이지 전체를 서버에 요청하는것이 아니라 최초한번 페이지전체를 로딩한후 이후부턴 데이터만 변경해서 사용할 수 있는 웹 어플리케이션을 말한다.

어려웠던 점

뷰의 이동이 필요할 때 인터넷 검색과 김민준님의 블로그를 통해 자연스럽게 React Router를 사용했는데, 요소 검사를 해 보니 a태그였다. 그 이후 a 태그와 React Router Link를 혼용해서 사용하니 문제점이 발견됐다. 어느 부분은 페이지 새로고침이 되어 App이 리렌더되고 어느부분은 컴포넌트만 바뀌는 현상이 발생했다. 알고보니 a 태그나 window.location으로 페이지를 이동시키는 것과 Link를 사용하는 차이였다.

내가 생각하는 단점

React를 사용한 첫 프로젝트 였기 때문에 React를 모두 이해하고 SPA 정신 ? 또는 사용이유에 대해 모두 이해했다고는 할 수 없다. 그래서 구체적인 기술적인 한계점 보다는 유저 입장에서 모든 부분을 싱글페이지로 만들 필요가 있을까?에 대한 의문은 생겼다. 예를들어 한 페이지 내 에서 좋아요 토글, 댓글 작성과 같은 부분은 싱글페이지가 좋아 보이는데 routing을 통해 컴포넌트를 이동할때는 페이지가 실제 넘어가는 느낌이 들지 않아 뭔가 이상한 느낌이 들었다. 아마 기존의 방식의 웹서비스에 더 익숙하기 때문일 수도 있다.