리액트 #01 - Overview

React JS #01

---

2014년에 핫하게 나와서 최근까지도 많은 사랑을 받고 있는 리액트.

오늘부턴 리액트의 시작부터 리액트 네이티브의 끝까지 공부하는 시간을 가져보겠다.

React JS란?

---

페이스북에서 개발한 유저 인터페이스 라이브러리로써, 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 한다.

현재 페이스북, 인스타그램, 야후, 넷플릭스를 포함한 많은 큰 서비스에서 사용되고 있다.

특징은 다음과 같다.

특징

---

- JUST THE UI

React.js는 UI 컴포넌트를 만들기 위한 라이브러리입니다. 컴포넌트 지향 프레임워크는 여러 가지가 있지만 React.js는 정말 UI 컴포넌트만 지원합니다.

비록 지원하는 범위는 작지만, 애플리케이션을 만드는 방법을 크게 바꿀 수 있다는 점이 재미있습니다.

또한, 이해 비용이 적어 도입하기 쉬우며 Backbone.js의 뷰 부분을 React.js로 구현하거나

Angular.js의 directives를 React.js를 사용해 구현하는 등 여러 환경과 조합해 사용할 수 있습니다.

- VIRTUAL DOM

React.js는 자바스크립트 내에 DOM Tree와 같은 구조체를 VIRTUAL DOM으로 갖고 있습니다.

다시 그릴 때는 그 구조체의 전후 상태를 비교하여 변경이 필요한 최소한의 요소만 실제 DOM에 반영합니다.

따라서 무작위로 다시 그려도 변경에 필요한 최소한의 DOM만 갱신되기 때문에 빠르게 처리할 수 있습니다.

- DATA FLOW

React.js는 단방향 데이터 흐름을 지향합니다. 

따라서 Angular.js의 양방향 데이터 바인딩을 사용할 때처럼 작성할 코드의 양이 확연히 줄거나 하지는 않습니다. 

그렇지만, 애플리케이션의 데이터를 관리하는 모델 컴포넌트가 있고 

그 데이터를 UI 컴포넌트에 전달하는 단순한 데이터 흐름으로 이해하고 관리하기 쉬운 애플리케이션을 만들 수 있습니다.

아니 근데 왜 이렇게 리액트리액트 하는 것이냐? 하고 장점을 한 번 알아보았다.

장점

---

• Virtual DOM 을 사용한 어플리케이션의 성능 향상

• 클라이언트에서도 렌더링 될 수 있고, 서버측에서도 렌더링 될 수 있음 (이를 통해 브라우저측의 초기 렌더링 딜레이를 줄이고, SEO 호환도 가능해집니다)

• Component 의 가독성이 매우 높고 간단하여 쉬운 유지보수가 가능해집니다.

• 프레임워크가 아닌 라이브러리서 다른 프레임워크들과 사용이 가능합니다. React 에선 UI만 신경쓰고, 빠져있는 부분은 본인이 좋아하는 라이브러리를 사용하여 stack 을 본인의 입맛대로 설정 할 수 있음

그렇다.