React 의 장점

리액트(React)란?

페이스북에서 제공해주는 프론트엔드 라이브러리이며, 컴포넌트 기반으로 되어 있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI를 만들어 사용자에게 보여진다.
웹 페이지를 만들기에는 HTML,CSS로도 충분하지만 동적인 데이터를 만들기에는 적합하지 않다. 이 때 리액트를 이용한다면 사용자와 상호작용 할 수 있는 UI를 손쉽게 만들 수 있기 때문에 사용한다.

• React 와 Angular 차이점
  : Angular는 뷰레이어를 포함한 많은 기능을 갖춘 완전한 프레임워크이지만 React는 웹을 만드는데 반드시 필요한 도구들이 기본적으로 제공되지 않는 라이브러리이다.

리액트의 특징

- 컴포넌트 기반의 라이브러리
: 헤더, 메인, 모달 같은 것들을 하나의 컴포넌트로 묶어서 관리할 수 있다. 따라서 리액트를 개발하다가 특정 부분에서 오류가 생기면 그 컴포넌트만 수정하여 사용할 수 있다. 코드의 재사용성과 유지보수성을 증가시켜준다.
- Props : 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터이다. 자식 컴포넌트에서 전달 받은 Props는 변경이 불가능하고 Props를 전달해준 최상위 부모 컴포넌트만 변경할 수 있다.

- State : 사용자와의 상호작용을 통해 데이터를 동적으로 변경해야 하는 것과 같이 동적인 데이터를 다룰 때 사용한다. 각각의 state는 독립적이라 다른 컴포넌트에 직접적인 접근은 불가능하다. 그러나 자신보다 상위에 있는 State는 변경이 가능하지만 State를 변경해주는 함수를 Props로 받는다면 State의 변경이 가능하다.

- Virtual Dom : 가상의 Document Object Mode로 실제 DOM을 조작하는게 아닌, DOM을 추상화 한 자바스크립트 객체를 구상해 사용한다.

• DOM(Document Object Model)
  : Javascript Node 개체의 계층화된 트리로, HTML,XML 문서의 프로그래밍 API이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다.

리액트 장점과 단점

장점

• 배우기가 간단하고, 어플리케이션을 만들 때 복잡함이 적다.
• Controller, directive, template, model 처럼 분리를 하지 않고 Component 하나로 관리한다.
• 뛰어난 Garbage Collection, 메모리 관리, 성능을 가지고 있다.
• 서버 사이드 렌더링과 클라이언트 렌더링을 둘 다 지원한다.
• 간편한 UI 수정과 재사용이 용이하다.
• 다른 프레임워크나 라이브러리와 혼용하여 사용할 수 있다. 즉, 개발이 완료된 서비스에도 적응이 가능하다.

단점

• 보여지는 부분에만 관여하기 때문에 데이터 모델링, Routing, Ajax 등의 기능을 제공하지 않는다.
• view 외 기능들은 직접 구현하거나 라이브러리를 사용하여 구현해야 하기 때문에 Javascript 배경지식이 부족할 경우에는 사용이 힘들다.
• IE8 이하 버전들을 지원하지 않는다.