[리액트 교과서] SPA와 React

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다.

 

 

단일 페이지 어플리케이션

single-page applications, SPA

 

입사 후 첫 프로젝트 파견 전에 본사에서 SPA 게시판을 만들어보라는 과제를 받았었다.

어찌저찌 만들긴 했는데 내가 만든건 진정한 SPA 형태가 아니니  나중에 다시 공부를 해보라는 피드백을 받았었다.

당시에도 SPA는 처음 들어보는 형태였던지라 무척 생소했었다.

그리하여 책의 흐름을 따라 정해보고자 한다.

 

SPA 아키텍처는 서버보다는 클라이언트

즉, 브라우저 측에 로직이 더 많은 팻 클라이언트(fat client or thick client)다.

SPA는 HTML 렌더링, 입력값 검증, UI 변경 등의 기능을 브라우저에서 해결한다.

일반적인 SPA 아키텍처 [출처-리액트 교과서 "아자트 마르단"]

1. 사용자가 새로운 페이지를 열기 위해 브라우저에 URL을 입력한다.

2. 브라우저가 URL 요청을 서버로 전송한다.

3. 서버는 응답으로 HTML, CSS, 자바스크립트 파일 같은 정적 자원을 보낸다.

대부분 HTML은 최소한의 기본 구조만 담고 있다.

이 단계에서는 보통 "로딩 중..." 메세지나 애니메이션 GIF 등을 이용해서 페이지가 준비 중이라는 것을 나타낸다.

4. 자바스크립트는 SPA를 위해 필요한 자원이다. 자바스크립트 로드 후 추가로 AJAX나 XHR요청을 보내 서버에서 데이터를 불러온다.

5. 데이터는 JSON, XML 등의 포맷으로 전달받는다.

6. SPA에 데이터가 전달되면 사용자 인터페이스를 구성하는 HTML을 렌더링한다. SPA는 템플릿에 전달받은 데이터를 밀어넣고 브라우저 상에서 UI를 렌더링한다.

7. 브라우저 렌더링이 끝나면 SPA는 "로딩 중..." 메세지를 없애고 사용 가능한 상태가 된다.

8. 사용자가 웹페이지를 확인한다. 사용자는 페이지를 사용하면서 SPA를 통해 서버로 새로운 요청을 발생시키기도 하고, 앞에서 설명한 2~6단계를 거치기도 한다. 이 단계에서는 경우에 따라 브라우저 라우팅이 이뤄지기도 한다. SPA에서 브라우저 라우팅을 구현하면 새로운 페이지를 로딩하지 않고 브라우저에서 다시 렌더링을 수행한다.

 

SPA 방식은 UI 렌더링(여기서는 템플릿으로 HTML을 생성하는 과정)을 대부분 브라우저 상에서 해결한다.

모든 렌더링을 서버에서 해결하는 전통적인 방식과 달리 SPA에서는 데이터만 주고 받는다.

 

---

단일 페이지 애플리케이션의 내부 [출처-리액트 교과서 "아자트 마르단"]

- 내비게이터나 라우팅 라이브러리가 MVC 패러다임의 컨트롤러처럼 데이터를 가져오고

이에 알맞은 템플릿을 지정하는 역할을 맡는다.

- 내비게이터 또는 컨트롤러는 요청을 보내 데이터를 가져오고,

받아온 데이터와 템플릿을 이용해 만든 HTML로 UI를 렌더링한다.

- UI는 클릭, 마우스 조작, 키 입력 같은 동작을 SPA에 전달한다.

- SPA 아키텍처는 브라우저에서 렌더링되므로 데이터도 브라우저에서 처리한다.

- 데이터를 이용해 HTML을 추가하거나 기존에 렌더링한 HTML을 변경한다.

 

 

이걸보니 내가 만들었던 SPA게시판은 일반적인 SPA에서 좀 덜떨어진 버전이었던 것 같고

앞으로 더 나아가서 배울 SPA는 밑의 방식인 것 같다. 앞으로 배울 리액트가 기대된다. 

얏홍~

 

출처

리액트 교과서 - 아자트 마르단 지음, 곽현철 옮김