React란?
UI 구성 요소를 기반으로 사용자 인터페이스 를 구축하기 위한 무료 오픈 소스 프런트 엔드 JavaScript 라이브러리 라고 한다. 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용한다. 가장 인기있는 프론트엔드 프레임워크 또는 라이브러리이다. 리액트는 컴포넌트 기반의 UI 라이브러리이고 컴포넌트에 중점을 두고 있다.
예) 넷플릭스
넷플릭스는 사용하기도 쉽고 로딩을 기다릴 필요도 없고 화면전환도 빠르게 작동한다. 서비스를 사용할 때 모바일 앱을 사용하는것 같다. 모바일앱은 상당히 반응이 좋은 사용자 경험을 제공해 줍니다. 화면전환이 원활하게 이뤄져서 순식간이 작동이 된다.
브라우저에서 자바스크립트는 DOM이라고 불리는 것을 조작할 수 있는데 이를 통해 html의 요소들이 화면에 렌더링된다. 자바스크립트로 조작할 수 있으며, 사용자들이 보는 것들을 변경할 수 있다. 새로운 html페이지를 불러오지 않아도 된다.
React는 클라이언트 사이드의 자바스크립트 라이브러리이고 클라이언트 사이드의 자바스크립트 코드를 작성하는데 도움을 준다. 중요한 것은 웹사이트를 위한 최신의 반응형 사용자 인터페이스를 구축하는 것이다.
왜 리액트가 필요할까?
자바스크립트에 추가로 리액트가 왜 필요한 걸까?
사용자 지정 html 컴포넌트에 사용자 지정 html 요소를 갖는다. 리액트는 응용프로그램을 작은 빌딩 블록과 작은 컴포넌트들로 분할하는 것에 관한 것으로 모든 빌딩 블록, 모든 컴포넌트들은 명확한 태스크들을 갖고 있으며 코드는 유지 보수와 관리가 용이하도록 유지된다. 리액트 개발자로서 작업하는데 리액트와 연계해서 복잡한 사용자 인터페이스 작업을 더 쉽게 구축할 수 있다. 복잡한 인터페이스를 쉽게 구축할 수 있게 해준다. 그리고 고 수준의 구문을 제공해서 선언형 방식, 선언형 컴포넌트 중심의 방식으로 코드를 작성하는 것이다. 사용자 지정 html 요소를 생성하고 리액트가 나머지를 수행한다.
Angular
완벽하게 컴포넌트 기반의 UI 프레임워크이고 리액트와 마찬가지로 컴포넌트에 집중한다. 하지만 리액트보다 더 많은 내장 기능을 갖고 있으며 처음부터 타입스크립트를 수용했다. (작은 프로젝트에는 적합하지 않을 수 있다.) 너무 많은 기능이 내장되어 있기 때문이다. 대규모 프로젝트는 많이 커뮤니티에 의존하지 않아도 되는데 프레임워크에 많은 것들이 내장되어 있기 때문이다. (템플릿의 문법도 형태는 비슷하지만 세부적으로는 기존과 완전히 다르게 변경되어 문법이 다를 수 있다.) 컴포넌트 중심이기는 하지만 앵귤러와 리액트는 약간 다른 방식으로 컴포넌트를 구축한다.
Vue.js
앵귤러와 리액트를 합쳐 놓은 것 같다. 양 극단 사이에 있는 것이라고 할 수 있다. Vue 역시 컴포넌트 기반의 UI 프레임워크이고 많은 기능을 포함하고 있지만 기능이 앵귤러보다는 적고, 리액트보다는 많다. 라우팅 같은 핵심 기능을 포함하고 있어서 뷰 역시 커뮤니티 의존성은 낮다. 하지만 앵귤러를 사용할 때만큼 과부하되지는 않는다.
