심재운 블로그

728x90
반응형

 

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

 

Reactant · A framework for building React applications

A framework for building React applications

reactant.js.org

설치

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

 

Reactant · A framework for building React applications

A framework for building React applications

reactant.js.org

 

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 설치 및 사용법

Facebook에서 만든 자바스크립트 패키지 매니저인 Yarn을 사용해 봅시다.Yarn 설치Yarn은 다양한 OS의 설치를 지원합니다.macOSHomebrew를 사용하는 설 ...

heropy.blog

 

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

 

Concepts

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

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

 

Service Module

@state는 모듈 불변 statedecorate (장식)하는 데 사용되며 @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

A framework for building React applications

reactant.js.org

예를 들면, 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

A framework for building React applications

reactant.js.org


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

A framework for building React applications

reactant.js.org

 

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'));

 

728x90
반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

loading