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 컴포넌트 #

1. Functional component (stateless)

   React에서 작업하는 동안 접할 수 있는 기본적인 컴포넌트 방식 중 하나로 그저 단순한 Javascript function의 모습으로 표현된다.

   import React ,{useState} from "react";
   
   const FunctionalComponent=()=>{
       const[count , setCount]=useState(0);
   
       const increase=()=>{
           setCount(count+1);
       }
   
       return
           <div style={{margin:'50px'}}>
               <h3>Counter App using Functional Component : </h3>
               <h2>{count}</h2>
               <button onClick={increase}>Add</button>
           </div>
       )
   }
   
   export default FunctionalComponent;
   

   • props를 인자로 받아 React component를 반환하는 평범한 javascript
   • render method 미사용
   • stateless component라고도 하며 단순히 데이터를 인수하여 어떤 형식으로든 화면에 표시하는 UI 렌더링 담당
   • React lifecycle method 사용 불가
   • React 16.8 이후 Hooks의 추가로 state 및 기타 React 기능 사용 가능

2. Class component (stateful)

   ReactJS로 구축된 대부분의 최신 웹 앱의 가장 기본적인 컴포넌트 방식으로 ES6 문법의 클래스 형식으로 표현된다.

   import React from "react";
   
   class ClassComponent extends React.Component{
       constructor(){
           super();
           this.state={
               count :0
           };
           this.increase=this.increase.bind(this);
       }
   
      increase(){
          this.setState({count : this.state.count +1});
      }
   
       render(){
           return (
               <div style={{margin:'50px'}}>
                  <h3>Counter App using Class Component : </h3>
                  <h2> {this.state.count}</h2> 
                  <button onClick={this.increase}> Add</button>
   
               </div>
           )
       }
   }
   
   export default ClassComponent;
   

   • class component를 사용하기 위해서는 React로부터의 확장이 필요
   • HTML을 반환하기 위해서는 render() method가 꼭 필요
   • stateful component라고도 하며 state와 logic을 구현할 수 있으며 this 키워드를 통해 해당 컴포넌트 내에 선언된 props, state, function에 접근 가능
   • React lifecycle method 사용 가능

Reference #

• https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react/

Incoming Links #

Related Data Sciences (DataScience 0) #

• ReactJS/Create-React-App
• ReactJS/Flux

Suggested Pages #

• 0.025 jQuery
• 0.025 모델
• 0.025 컨트롤러
• 0.025 HTML
• 0.025 MVVM
• 0.025 Flux
• 0.025 JavaScript
• 0.025 React
• 0.025 뷰
• 0.025 JSON
• More suggestions...