Skip to content

ReactJS #
Find similar titles

Structured data

Category
Programming

ReactJS #

소개 #

React.js는 페이스북이 MVC 프레임워크에서 View를 만들기 위해 개발한 오픈소스 자바스크립트 라이브러리이다. AngularJS가 MVC 프레임워크인데 비해 ReactJS는 View에 해당하는 기능들만 제공하는 경량화된 UI 라이브러리로 BackboneJS의 View단을 구현하거나 AngularJS의 지시자(directives)를 ReactJS를 사용해 구현하는 등 여러 환경과 조합해서도 사용할 수 있다.

특징 #

1. Just the UI

UI 컴포넌트만 지원하는 경량화된 라이브러리이다.

2. Virtual DOM

Javascript 객체 형태로 변경된 데이터만 감지해서 DOM에 반영하는 태스크를 담당한다. 따라서 변경이 필요한 최소한의 DOM만 갱신해서 데이터가 변할때마다 인터페이스를 가장 최신으로 유지시킨다.

3. Data flow

단방향 데이터 흐름방식을 취하고 있어 데이터 흐름이 단순해서 데이터의 흐름을 추적하기 쉽다. ReactJS/Flux(데이터가 단방향으로 흐르는 것을 유지시켜주는 패턴)와 함께 구성했을 때 활용도가 좋아진다.

4.JSX

Javascript의 Syntax 확장으로 선택적 사용도 가능하지만 JSX를 사용하면 Javascript 내부에 따옴표없이 마크업 코드를 직접 작성 수 있게 되고 Javascript 변수나 속성값 바인딩도 가능하다.

장단점 #

1.장점
    - Virtual DOM을 JS로 구현해서 UI 컴포넌트의 속도가 빠르다.
    - 서버사이드 랜더링이 가능하다.
    - 단방향 데이터 흐름방식 적용으로 데이터 흐름 추적이 쉽다.
    - 프레임워크가 아닌 라이브러리이므로 가볍고 다른 프레임워크들과 혼용이 가능하다.

2.단점
    - View만 다루므로 그 외 부분은 다른 기술을 사용해야 한다.

환경설정 #

  1. Package 설치

    • Babel : ECMAScript6을 지원하지 않는 환경에 대응해서 ECMAScript5 문법으로 변환해준다.
    • Webpack : 모듈 번들러로 브라우저에서 import(require)를 할 수 있게 해주고 자바스크립트 파일들을 하나로 합쳐준다.
    • Webpack-dev-server : webpack에서 지원하는 간단한 개발서버로 별도의 서버구축없이 웹서버를 열수 있고 hot-loader를 틍해 코드가 수정될 때마다 자동으로 리로딩되게 해준다.

    $ npm install -g babel webpack webpack-dev-server

  2. 프로젝트 생성

    $ mkdir react-project
    $ cd react-project
    $ npm init

  3. Dependency 및 Plugin 설치

    $ npm install --save react react-dom
    $ npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 webpack webpack-dev-server

ReactJS 컴포넌트 #

Incoming Links #

Related Data Sciences #

Suggested Pages #

0.0.1_20210630_7_v33