TIL - 리액트 개요

리액트는 라이브러리이다. 뷰와 앵귤러를 프레임워크라하고 리액트는 라이브러리하고 이유에는 다음과 같은 차이가 있다.

 

라이브러리	공통 기능의 모듈화가 이루어진 집합
프레임워크	기능 구현에 중점적인 프로그래밍적 재원을 지원하는 기술

 

이해하기 쉽게 설명하자면 라이브러리는 프레임워크라고 하기에는 제공하는 기술이 부족하고, 다른 기능들을 불러와 사용한다. 상태관리를 위한 Redux, 라우팅을 위한 React-route-dom 등의 여러 라이브러리를 쓴다.
특정 애플리케이션을 개발한다고하면 리액트는 UI를 렌더링하는 역할을 할 뿐 애플리케이션을 아우를는 아키텍처에 대해서는 제어할 수가 없다. 리액트는 애플리케익션의 흐름과 구조를 제어하며 앞서 말한 Redux와 같은 다른 라이브러리를 가져다 사용하는 것이 일반적이다.

 

SPA

Single Page Application의 약자로 한 개의 페이지로 구성되는 애플리케이션을 말한다. 과거에는 MPA라 하여 Multi Page Application 개발 방식을 통해 사용자가 페이지 내에서 다른 화면을 보기 위해 별도의 페이지를 만들어야했지만 리액트를 통해 한 개의 페이지에서 다른 화면을 렌더링할 수 있게되었다.

---

 

*  출처: npmtrend - React와 Angular, Vue 다운로드 수치

페이스북에서 개발을 하였으며 초기에는 페이스북 내부에서 개발용으로 쓰던 것이었으나 이후 오픈소스로 공개되었다.

UI를 자동으로 업데이트한다는 리액트의 특징은 사용감을 좋게 해줄뿐더러 가상DOM을 이용한 UI 업데이트를 통해 반복적인 코드 사용없이 사용할 수 있다는 장점이 있다.

가상 DOM은 페이지를 구성하는 DOM 모델을 기반으로하여, 변경이 필요한 DOM의 구성을 가상 DOM을 통해 UI를 업데이트한다. 

단방향으로 흐르는 데이터의 흐름은 성능 저하 없이 DOM을 렌더링하며, 컴포넌트 기반의 아키텍처를 통해 특정 기능만을 위해 컴포넌트라는 단위로 코드를 분리할 수 있다.

리액트는 자바스크립트를 기반으로 하여 XML을 조합한 JSX 문법을 사용하며 선언적인 방식으로 작성을 통해 무엇을 어떻게 할건지에 대해 생각하게 만든다. 따라서 직관적인 기능이해가 가능하다.

 

또한 다른 라이브러리와의 높은 호환성이 있으므로 애플리케이션에서 다른 라이브러리와 프레임워크와 함께 사용이 가능하다.