[TIL] 24_0119 SPA기반 리액트

 

SPA

- Singel Page Aplication의 준말이야.

단 한 개의 페이지로 이루어진 애플리케이션이야.

모바일로 된, 안드로이드앱같다며 웹앱, 웹애플리케이션이라고도 불려.

 

 

기존의 MPA 같은 여러 페이지로 나누어진 앱은 문제가 있어.

예를 들어, 좋아요 기능을 눌렀을 때마다 페이지가 다시 갱신되며 깜빡이면서 다시 위치가 조정되는 건데(리렌더링,re-rendering) 그건 사용자에게 굉장히 불편해. (누를 때마다 화면이 계속 깜빡이며 새로고침되는 것.)

 

하지만 실제, 인스타, 페이스북처럼 리액트를 사용하는 앱은 그런 좋아요를 눌렀을 때, 그 자리만 해당 컴포넌트만 이미지가 채워지는 것 처럼 보여. 그 자리만 다시 갱신되는 거야. 하나의 페이지 안에서 해당 요소만 바꿔주는 거지.

 

단 한 개의 페이지 이루어져서 깜빡임을 없애버리는 것. => 이게 SPA개념이야.

 

SPA 특징

- 딱 한개의 페이지로 구성된 웹 앱이야.

- 딱 한 번만 서버에 리소스를 요청해.

무슨 말이냐면, 리액트 프로젝트를 설치하면 프로젝트 파일 내에 HTML 파일이 하나 밖에 없어. 그려주는 건 페이지를 그려주는 건 JS가 하게 되지. 그래서 서버에 한 번만 리소스 요청하고 그 이후엔 필요할 때마다 동적으로 생성하는 거야.

그 이후엔 필요할 때 데이터만 받아서 기존 페이지를 수정하며 구성하는 거야. 예를 들면, 좋아요에 대한 데이터만 받아와서 화면을 수정하는 거야.

그렇다보니 사용자 입장에선 페이지가 로딩되는 깜빡임이 없어서 좋은 거야. 그렇게 자연스러운 UX를 구현할 수가 있는 거지.

• 비슷한 프레임 워크론 Angular나 Vue가 있어.

SPA 단점

- SEO가 약해. SPA는 search 엔진이 찾을 수가 없어. 

 

* SEO (search engine optimiztion)  :검색엔진최적화

 

- 예를 들면, 구글에서 어떤 페이지를 입력할 때 구글에 있는 검색을 도와주는 로봇(엔진)이 찾으려고 하는 사이트를 잘 찾게 html을 잘 제공해줘야 해.

react같은 경우 index.html 1개인데 별 내용 없어. 그냥 거기 html 요소 안에 app.js로 동적으로 html 요소를 써주는 것 뿐인거야. 그래서 search 엔진이 내용을 찾을 수가 없는거지.

 

근데 MPA경우,

index.html뿐만 아니라 HTML 파일이 엄청 많아. 서버에 다 들어가있어. 이미 만들어져있기 때문에 . 그래서 search엔진이 잘 찾을 수 있어.

 

그래서 그걸 보완하기 위해 next.js를 사용해주는 거야.

 

MPA

페이스북이나 인스타가 멀티페이지였으면 좋아요를 누를 때마다 계속 해서 "다시 페이지가 로딩되는" 이런 리렌더링이 엄청 많이 이루어지는 거야. 계속 깜빡이는 거지 화면이. 이러면 UX가 나빠져서 사용자 입장에선 별로야. 요즘 그래서 SPA 각광받고있는 거야.

원래 MAP라는 말은 없었지만 SPA라는 특이한 구조의 프레임워크가 나오면서 비교할 대상으로 MPA가 있다라고 말이 생긴거야.

원래는 여러 페이지로 되어있는 게 당연했어. 근데 SPA가 나오면서 MPA가 나온거지.

 

 

*참고 

-  스파르타 코딩 클럽 리액트 입문주차 강의

 

 

느낀점

- 리액트에서 정한 문법대로 만든다면 사용자가 인지하지 못할 리렌더링을 구사할 수 있다는게 좋은 것 같아.

- 나도 이런 프레임워크를 개발할 수 있는 개발자가 되고싶어.