리액트(React.js)
리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.
개념잡기
JSX, Virtual DOM, 선언형 프로그래밍, Components, State, Props, 단방향데이터플로우
-
JSX
JavaScript + Xml = JSX, React에 새로 도입된 자바스크립트 기반의 문법이다.
-
Virtual DOM
실제 DOM(브러우저가 화면을 그리기위한 정보를 담고 있는 문서 객체)에 적용시키기 전에 Virtual DOM을 만들어서 실제 DOM과 비교하고 변경이 있는 부분만 대체후 그 결과만을 실제 DOM으로 전달하는 과정을 거친다. 이것은 브라우저가 진행하는 연산의 양을 줄이는데 기여한다.
-
Declarative Programming(선언형 프로그래밍)
프로그램이 함수형,논리형,제한형 프로그래밍 언어로 쓰인 경우를 말한다. 목표를 이루기 위한 수행 단계를 매우 자세히 설명하는 코드를 작성하는 명령형 프로그래밍(Imperative Programming)과 반대되는 개념이다. 선언형 프로그램은 화면에 그리기 위해 알고리즘을 구현하지 않는다.
-
Components
Module(특정 기능을 온전히 수행할 수 있도록 만들어진 실질적으로 구현이 된 단위이자 컴포넌트의 집합) 내에서 재사용이 가능하도록 만들어진 최소의 단위이다. 화면에 구현되는 모든 구성요소는 컴포넌트화 된다.
-
State/Props
자바스크립트의 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, props는 컴포넌트에 전달되며, state는 컴포넌트 안에서 관리된다.
-
단방향 데이터플로우(One-way reactive Data Flow)
데이터가 Parent로부터 Child로 흐르며, 데이터의 갱신에 반응하여 뷰가 갱신된다. 그렇기 때문에 디버깅이 용이하며, 타 라이브러리에 비해 안전성이 높다.
리액트(React.js)의 장점
- Component의 가독성이 높으며 효율적으로 재사용이 가능하고 유지보수가 용이
- Facebook에서 만들었기 때문에 커뮤니티나 자료의 방대함
- 다른 프레임워크나 라이브러리와 혼용 가능
- Virtual DOM을 활용하여 빠른 렌더링 가능
- 단방향 데이터 바인딩을 통한 디버깅 용이, 다른 라이브러리에 비해 안전성 높음
- 리액트 네이티브를 활용하여 앱 개발 가능
리액트(React.js)의 단점
- 프레임워크의 MVC와 비교하였을때 V(view)만을 관리한다. 따라서 이외의 기능은 써드파티 라이브러리를 이용하거나 직접 구현해야 한다.
- IE8 이하의 버전은 지원하지 않는다.
- 단방향 데이터 바인딩만 제공한다.
