리액트와 SP

리액트(React)

 

리액트 란?

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.

• 사용자 인터페이스 라이브러리 이다.

• 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.

• UI 컴포넌트를 만드는 일만 하며 캡슐화를 잘 시켜줘서 재사용 성이 높다.

• 한가지 일만하여 단순하고 여러 자바스크립트 프레임워크나 라이브러리와 함께 사용할 수 있다.

• 그래서 React를 사용하기 위해서 기존 코드를 모두 바꿀 필요 없이 필요한 부분만 조금씩 사용이 가능하다.

• 리액트는 싱글 페이지나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다. 복잡한 리액트 애플리케이션들은 상태 관리, 라우팅, API와의 통신을 위한 추가 라이브러리의 사용이 일반적으로 요구된다.

 

---

SPA(Single Page Application)

 

SPA 란?

단일 페이지로 구성된 웹 어플리케이션을 말한다. SPA는 화면이동 시에 필요한 데이터를 서버사이드에서 HTML으로 전달받지 않고(서버사이드 렌더링 X), 필요한 데이터만 서버로부터 JSON으로 전달 받아 동적으로 렌더링한다.

 

 

기존 어플리케이션과 SPA의 차이

기존 어플리케이션은 화면이동 시에 화면 이동에 필요한 HTML을 서버사이드에서 받아서 처음부터 다시 로딩하기 때문에 시간이 걸린다.

반면, SPA에서는 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버사이드에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠르다.

 

장점

1. 하나하나 화면 전체를 렌더링할 필요가 없기 때문에 화면이동이 빠르다.

2. 화면에 필요한 부분의 데이터만 받아서 렌더링 하기 때문에 처리과정이 효율적이다.

3. 유저에 입장해서 사용하기 편리하다.

단점

1. 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드 하기 때문에 초기 구동 속도가 상대적으로 느리다.

2. 어플리케이션을 구현하는데 보다 시간이 걸리며 복잡하다.