리액트와 SPA

SPA란 Single Page Application의 약자로 단일 페이지 애플리케이션이라고 한다. SPA는 서버로부터 완전한 새로운 페이지를 불러오는 것이 아닌 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹 사이트를 말한다. 기존의 웹 서비스와 비교했을 때 빠르고 서버 요청이 적다. 그리고 개발이 간단하고 능률적이라는 장점이 있다.

 

SPA 중심에는 대표적인 라이브러리/프론트 프레임워크 React, Vue/Angular가 있다.

리액트는 페이스북과 인스타그램등에서 사용하고 있는 오픈소스 UI 프레임워크이다.

 

사용자 액션에 따라 DOM을 일일이 다루었던 과거 개발 방식과는 달리 개발자가 DOM을 직접 다루지 않고 React가 데이터 상태에 따라 자동으로 UI를 관리하기 때문에, 개발자는 단순히 특정 상태에 대한 뷰의 변화만 구현하면 된다.

 

React는 다음의 세 가지 특징을 갖고 있다.

-UI 컴포넌트를 만들기 위한 라이브러리이며 React의 컴포넌트는 트리 형태로 구성된다.

-Virtual DOM을 사용하여 변경된 부분에 대한 최소한의 DOM 처리로 UI를 업데이트하여 애플리케이션의 성능을 향상한다.

-부모 컴포넌트에서 하위 컴포넌트로 전달하는 단방향의 단순한 데이터 흐름을 갖고 있어 데이터 추적과 디버깅을 쉽게 해 준다.

 

*DOM : 문서 객체 모델, 프로그래밍 interface