1편 - Reactant : A framework for building React applications 소개

ReactantA : framework for building React applications

탄생배경

React는 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리이지만 React를 기반으로 애플리케이션을 개발하려면 많은 구축 구성과 다른 많은 라이브러리 선택 (React 상태 라이브러리 및 라우터 라이브러리 선택 및 학습 등)을 수행해야합니다. ). 또한 비즈니스 로직이 어떻게 추상화되고 구조화되어야하는지 고려해야합니다. React를 사용하는 모든 사람은 React가 어떻게 구축되었는지에 대한 자신의 인식을 실천하지만 비즈니스 로직 자체에 빠르게 집중할 수는 없습니다. 애플리케이션 비즈니스의 규모가 커짐에 따라 쉽게 이해하고 유지 관리 할 수있는 프레임 워크가 절실히 필요합니다.

 

그리고 비즈니스 로직을 적용하려면 관심사를 분리하는 것이 좋습니다. UI 로직과 비즈니스 로직이 혼합 된 경우 낮은 유지 보수 가능성을 피하기 위해 명확한 책임 경계가 필요합니다. 우리는 애플리케이션을 구축 할 때 항상 비즈니스 로직에 초점을 맞추고 싶습니다. 애플리케이션의 비즈니스 핵심 가치 중 하나입니다. 유지 관리 및 테스트가 용이하기를 바랍니다. Redux는 React에서 가장 인기있는 상태 라이브러리로 남아 있습니다. React의 불변의 원칙과 완전히 일치합니다. Redux는 상태 컨테이너에 불과하며 이러한 상태를 실제로 관리하는 방법을 잃어 버리는 경우가 많습니다. 확장 가능하고 느슨하게 결합되며 쉽게 유지 관리 할 수있는 React 애플리케이션을위한 프레임 워크가 필요합니다.

---

Clean Architecture

Reactant는 몇 가지 새로운 개념만 가지고 있는 간단하고 명확한 아키텍처 디자인입니다. Reactant는 테스트 가능하고 유지 보수 가능하며 복잡한 애플리케이션을 빌드하는 데 사용할 수 있는 약간의 core key API 를 제공합니다.

 

Develop Web & Native Mobile Platform

Reactant는 여러 플랫폼 (예 : Web, Native Mobile)에서 React application 개발을 지원하여 여러 플랫폼에서 애플리케이션을 효율적으로 구축합니다.

 

1. Service Module 생성하기

모듈 정의는 매우 간단하며 종속성 주입 및 상태 관리를 위한 데코레이터 외에는 필요하지 않습니다.

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

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

 

2. View Module 생성하기

"ViewModule"을 확장하고 view 함수 component 에 삽입(inject) 할 메서드(method) 와 데이터(data) 를 정의만 하면됩니다.

@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>
    );
  }
}

 

3. Bootstrap app 사용하기

"createApp"을 사용하여 view module 및 render 함수를 전달하면 app 을 bootstrap 할 준비가 된 것입니다.

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

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