SPA란 무엇인가?
리액트를 공부하려면 기본적으로 알아야 할 Web 지식이 있다. 그중 하나가 SPA와 MPA다. 우리가 웹사이트에 접속해서 탐색할 때를 생각해 보자. 아래는 내가 좋아하는 경제 사이트다. 사이트에 접속하면 main 화면이 나오는데 index.html이 연결되어 있는 것을 볼 수 있다. 밑에 경제 버튼을 클릭하면 m_see.html로 변경되는 것도 확인할 수 있다. 이 사이트는 수많은 html 자료로 구성된 오래된 웹사이트다. 이를 MPA라 부른다.
버튼, 탭을 누르면 페이지를 이동하게 되는데 그때마다 페이지가 바뀐다. 각 페이지별로 HTML파일이 존재하며, 페이지를 이동하면 브라우저에서 해당 페이지의 HTML파일을 받아와서 화면에 표시한다. 이 사이트를 만드신 분은 수많은 html파일을 따로 작성한다고 고생하셨을 거다.
HTML파일이 수십, 수백 개가 되면 어떻게 될까? 관리하기가 무척 힘들다. 그래서 SPA(Single Page Application)이 나왔다. SPA는 위 사이트와 다르게 하나의 페이지(HTML)만 존재하는 웹사이트를 말한다. 아래 그림을 보면 이해가 쉬울 것이다.
SPA vs MPA
왼쪽 그림은 위에서 예시로 든 MPA(Multi Page Application)다. 이 방식을 사용하면 페이지가 여러개로 구성된다. 비효율적이다. 반면 오른쪽 그림은 SPA(Single Page Application)이다. 단 하나의 페이지만 존재하고(HTML 파일이 하나), 이 HTML 파일의 <body> 태그의 내부가 비어있다. SPA 페이지에 접속하면 그 페이지에 해당하는 콘텐츠를 가져와서 채워넣는다. 효율적이다.
리액트의 역할
리액트가 해당하는 콘텐츠를 채워넣는 역할을 한다. 리액트는 SPA를 쉽고 빠르게 만들 수 있도록 도와주는 유용하고 편리한 도구라고 이해하면 쉽다. 리액트를 공부하기 위해 SPA와 MPA 개념을 간단히 정리해 봤다. Javascript를 공부해 두면 할 수 있는 것이 많다. 프런트, 백엔드 둘 다 할 수 있기 때문이다. 다음에는 리액트 개념과 사용방법에 대해 정리해 보겠다.
'Web' 카테고리의 다른 글
| URL(Uniform Resource Locator)이란 무엇인가? (3) | 2023.06.11 |
|---|---|
| spring만 공부할 것이 아니라 Web도 봐야되네 (0) | 2023.05.02 |
