[React] SPA(Single Page Application)란?

2022. 2. 8. 17:01·React/이론
반응형

1. SPA?

Single Page Application(싱글 페이지 애플리케이션)의 약어이다.

말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다.

 

과거의 웹 사이트

전통적인 웹 사이트는 요즘보다 문서 하나의 용량이 적었다. 

그래서 새로운 페이지를 요청하면 서버가 완전히 새로운 페이지를 전송했다. 

 

하지만 요즘엔 웹 사이트가 고도화되어, 한 페이지의 용량이 커지고, 그럴때마다 새로운 페이지를 전달하기엔 

버거워졌다. 

 

 SPA!

용량이 커진 웹 사이트를 무리없이 전송하기 위해서 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 

바꿔가면서 표현하는 것이 SPA인것이다. 

 

우리가 무언가를 클릭하거나 스크롤하면 홈페이지는 상호작용을 위해서 최소한의 요소만 변경한다. 

페이지 이동이 발생한 경우에도 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다.

 

하지만 SPA도 단점은 있는데, 앱의 규모가 커지면서 자바스크립트 파일이 커지는 부분과 페이지 로딩 시 사용자가 방문하지 않을 페이지의 스크립트도 불러온다는 점이다. 

반응형

'React > 이론' 카테고리의 다른 글

[React] Hook  (0) 2022.02.08
[React] React-lifecycle  (0) 2022.02.08
[React] JSX란?  (0) 2022.02.08
[React] 컴포넌트란?  (0) 2022.02.08
[React] 리액트란?  (1) 2022.02.08
'React/이론' 카테고리의 다른 글
  • [React] React-lifecycle
  • [React] JSX란?
  • [React] 컴포넌트란?
  • [React] 리액트란?
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    next.js
    자바스크립트
    ChatGPT
    리얼클래스
    typescript
    다이소
    리액트
    타일러영어
    바질 키우기
    영어독학
    타입스크립트
    바질
    리얼학습일기
    알고리즘
    Node.js
    프로그래머스
    Docker
    redux
    CSS
    javascript
    식물
    ReactNative
    react
    네트워크
    Babel
    CCNA
    webpack
    덤프
    네이버 부스트캠프
    영어회화
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[React] SPA(Single Page Application)란?
상단으로

티스토리툴바