[221130] 데이터 바인딩 / SPA

데이터 바인딩이란?

화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다. 예를 들어서 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 한다.

 

단방향 데이터 바인딩

컴포넌트 내에서 '단방향 데이터 바인딩'은 Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것을 의미한다. [JS(Model) -> HTML(View)] 단방향 데이터 바인딩이기에 역으로 HTML(View)에서 JS(Model)로의 직접적인 데이터 갱신은 불가능하다. '이벤트 함수(onClick, onChange,...)'를 주고 함수를 호출한 뒤 Javascript에서 HTML로 데이터를 변경해야 한다. [HTML(View) -> JS(Model)]

 

컴포넌트 간에서 단방향 데이터 바인딩은 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되는 구조이다. 대표적으로 SPA Framework에서는 React에서 단방향 데이터 바인딩을 한다.

양방향 데이터 바인딩

양방향 바인딩이란 컴포넌트 내에서 자바스크립트(model)과 html(view)사이에 viewModel이 존재하여 하나로 묶여서 둘 중 하나만 변경돼도 함께 변경되는 것을 의미한다. 컴포넌트 간에서는 부모 컴포넌트에서 자식 컴포넌트로는 Props를 통해 데이터를 전달하고, 자식 컴포넌트에서 부모 컴포넌트로는 Emit Event를 통해서 데이터를 전달하는 구조이다. 대표적으로 SPA Framework에서는 Vue.js, Angular에서 양방향 데이터 바인딩을 한다.

[JS] 데이터 바인딩 이해하기(단방향, 양방향 데이터 바인딩)

 

SPA 방식과 MPA 방식

SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이다. 반면 SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드한다. 그 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다.그래서 SPA를 CSR(Client Side Rendering) 방식으로 렌더링한다고 말한다.

 

MPA(Multiple Page Application)는 여러 개(Single)의 Page로 구성된 Application이다. MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드되고 매번 전체 페이지가 다시 렌더링 된다. 그래서 MPA를 SSR(Server Side Rendering) 방식으로 렌더링한다고 말한다.

 

SPA vs MPA와 SSR vs CSR 장단점 뜻정리 - 하나몬