[React] SPA 싱글페이지 애플리케이션이란? 무엇일까.

 리액트 개발 시작하기에 앞서, 리액트 프레임워크의 개념을 이해하는 것이 중요하다. 이를 위해 먼저 웹 서버와 웹 브라우저 간의 통신 과정과 싱글페이지 애플리케이션(SPA)의 개념을 알아야한다. 웹 브라우저가 서버로부터 데이터를 요청하고 응답받는 과정과 SPA가 페이지를 동적으로 업데이트하여 사용자 경험을 향상시키는 방식을 이해하면, 리액트의 핵심 동작 원리를 쉽게 파악할수 있다. 이 글에서는 이러한 내용을 간략하게 정리 하였다.

---

리액트 프레임워크 이해하기

• 리액트(React)는 2013년 페이스북에서 발표한 오픈소스 자바스크립트 라이브러리
• 주로 사용자 인터페이스(UI)를 효율적으로 구축하기 위해 사용
• 가상 DOM(Virtual DOM)과 JSX 라는 새로운 방식으로 효율적인 렌더링 지원
• 프론트엔드는 웹 브라우저에서 사용자에게 보여지는 화면을 HTML, CSS,  자바스크립트 등을 이용해 개발하는 부분
• 백엔드는 프론트엔드에서 요청한 데이터를 처리하고 제공하는 서버 측 개발을 의미
• 이런 관점에서 리액트는 프론트엔드 자바스크립트 프레임워크에 해당

 

---

1. 웹 서버와 웹 브라우저의 통신 과정 🌐💭

웹 서버는 웹 브라우저가 요청하는 다양한 유형의 자원을 제공하는 역할을 한다. 이 과정은 HTTP 프로토콜을 통해 이루어진다.

*프로토콜: 어떤 방식으로 자원에 접근할지에 대한 규칙이나 약속을 의미 (예: http, https, ftp 등)

 

1. HTTP 요청: 웹 브라우저가 사용자가 입력한 URL을 기반으로 웹 서버에 특정 자원을 요청한다. 이때, HTTP 프로토콜을 사용하여 서버로 요청을 보낸다.
2. HTTP 응답: 웹 서버는 요청받은 자원(예: HTML, CSS, 이미지 파일 등)을 찾아, 이를 HTTP 응답 형태로 웹 브라우저에 전송한다.
3. 렌더링: 웹 브라우저는 서버로부터 받은 HTTP 응답 데이터를 바탕으로 사용자가 볼 수 있는 웹 페이지로 변환하여 화면에 표시한다.

 

 

---

 

2. 싱글 페이지 애플리케이션이란 무엇일까 🖥️🔄️

 리액트로 만드는 웹 애플리케이션은 index.html 하나의 파일로 동작하며, 백엔드에서 받아온 JSON 데이터를 해석해 화면에서 필요한 부분만 동적으로 업데이트한다. 이를 통해 전체 페이지를 새로 로드하지 않고, 사용자가 요청한 부분만 변경하는 방식의 웹 애플리케이션을 싱글 페이지 애플리케이션(SPA)이라고 한다.

 

• 멀티 페이지 애플리케이션(MPA): 새로운 페이지 요청 시마다 전체 페이지가 다시 로드되며, 화면 깜빡임(새로고침)이 발생하는 전통적인 웹 애플리케이션 방식
• 싱글 페이지 애플리케이션(SPA): 하나의 페이지에서 데이터만 동적으로 업데이트하며, 페이지 새로고침 없이 부드럽게 화면을 전환하는 방식

 

---