2편 - Reactant 설치 부터 개념 알아보기

 

https://reactant.js.org/docs/concepts

Reactant · A framework for building React applications

설치

reactant-cli를 사용하여 새로운 Reactant 프로젝트를 빠르게 생성하는 것이 좋습니다. reactant-cli 에 대한 자세한 정보를 참조하세요.

Reactant · A framework for building React applications

 

reactant-cli 사용

npx reactant-cli init my-app # default use TypeScript
# use `npx reactant-cli init my-app --language javascript` for creating a Javascript project.
cd my-app
yarn start

yarn 설치가 안되어 있다면, 아래 블로그를 참고하시고 설치하시면 되겠습니다.

https://heropy.blog/2017/11/25/yarn/

Yarn 설치 및 사용법

 

실행해 보면 아래 처럼 3000 포트로 간단한 카운트 샘플 4가지를 보여줍니다.

 

Concepts

Reactant은 효율적으로 react 개발을 하기 위해 약간의 API를 배울 필요가 있습니다. (ViewModule, injectable, useConnector, injectable, action, state,과 createApp)

React 의 기본 사항 외에도, Reactant는 두 가지 새로운 개념 ViewModule과 PluginModule 을 제공합니다.

 

Service Module

@state는 모듈 불변 state를 decorate (장식)하는 데 사용되며 @action은 모듈 state를 변경하는 함수를 decorate (장식)하는 데 사용됩니다. decorated (데코 레이팅) 된 state 는 변경 불가능한 상태이지만 @action으로 데코 레이팅 된 메소드의 mutations(변형)을 사용하여 실제로 모듈의 state 를 업데이트 할 수 있습니다.

 

@injectable은 주입 할 수있는 모듈을 장식하는 데 사용됩니다. Reactant는 사전에 @injectable 장식이 필요하지 않은 모듈도 지원하지만, dependency injection (종속성 주입)이 필요한 모든 모듈에는 @injectable decoration 을 권장합니다.

 

TypeScript와 JavaScript의 @injectable 매개 변수는 완전히 다릅니다. 자세한 내용은 @injectable 을 참조하세요.

Reactant · A framework for building React applications

예를 들면, Counter 프로젝트는 TypeScript 로 셋팅이 되어 있습니다. 

import { injectable, action, state } from 'reactant';

@injectable()
class Counter {
  @state
  count = 0;

  @action
  increase() {
    this.count += 1;
  }

  @action
  decrease() {
    this.count -= 1;
  }

  doSomething() {
    //
  }
}

 

Reactant 는 dependency injection 기능을 제공합니다. 자세한 내용은 해당 링크를 참고하세요.
dependency injection.

Reactant · A framework for building React applications

---

View Module

ViewModule은 Reactant의 핵심 개념입니다. non-view modules 과 UI 구성 요소 간의 dependencies(종속성) 및 logic 를 정의합니다. UI 로직과 business logic 의 분리가 결합되어 구현합니다.
ViewModule을 사용하여 서비스 모듈의 Dependency injection (의존성 주입) 및 컴포넌트의 상태 연결 주입(connection injection) 합니다.

import { injectable, ViewModule, useConnector } from 'reactant';
// import `Counter`

@injectable()
class AppView extends ViewModule {
  constructor(public counter: Counter) {
    super();
  }

  component() {
    const count = useConnector(() => this.counter.count);
    return (
      <button type="button" onClick={() => this.counter.increase()}>
        {count}
      </button>
    );
  }
}

 

useConnector parameter 는 object maps, e.g. useConnector(() => { count: this.counter.count }) 이와 같은 것들을 지원하며, 대부분의 시나리오대로 작동합니다. state 가 변경될 때, useConnector 는 자동적으로 shallow comparison 를 수행하여 갱신해야 하는지 확인합니다.

 

ViewModule은 @state 및 @action을 사용할 수도 있으며, 일반적으로 파생 데이터를 계산하기 위해 @computed를 사용합니다.

ViewModule 에 대한 좀더 자세한 내용은 아래와 같습니다.

Reactant · A framework for building React applications

 

Bootstrap

기본적으로 createApp 및 부트 스트랩을 사용하여 프로젝트를 실행합니다. Reactant는 미들웨어 및 Reactant 플러그인과 같은 다른 환경(configurations) 도 지원하며, createApp을 통해 다양한 종속성 주입(dependency injection)  환경(configurations)을 구성합니다. Reactant에 대한  advanced guides 를 참조하십시오.

import { render } from 'reactant-web';
import { createApp } from 'reactant';
// need to import `AppView`

const app = createApp({
  main: AppView,
  render,
});

app.bootstrap(document.getElementById('root'));