프로그래머가 되는 꿈

SPA(Single Page Application) 본문

프론트엔드 (Front-end)/React

SPA(Single Page Application)

AI박사 2026. 1. 14. 11:26

 

 

Single Page Application : React는 딱 한개의 html파일이 있다./웹 페이지 하나만 있는 애플리케이션

 

자바스크립트의 예시 파일들

 

자바스크립트 : 페이지 별로 html이 있었고, 다른 페이지 갈때마다 새로운 html파일을 불러오고 또 새로 불러오고, 웹사이트 로딩도 되고... 

리액트 : 딱 하나의 html 페이지 만 있고 다른 html을 가져오는 것이 아니라 안에 있는 내용만 자바스크립트가 바꿔준다. 

 

따라서 웹 페이지는 하나 있지만 안의 내용은 바꾸면서 마치 페이지가 여러개가 있는것처럼 느끼는 현상(효과)

 

굳이 여러개의 html을 만들지 않고 하나의 파일에서 안의 내용을 바꿔주는 이유

UI적으로 굉장히 좋다. 우리가 다른 html을 가져오려면  코드 끌고와야 하니까 로딩,새로고침이 생긴다.

하지만 이 웹 페이지가 하나면 내용을 자바스크립트가 바꿔주기 때문에 페이지 reload하지 않아도 부드러운 UI전환이 생기 된다.

(웹페이지인데 모바일 버전으로 쓸 수 있다.)

 

SPA: user경험 때문에 굉장이 유용하다.