입문

React는 페이스북과 커뮤니티에서 개발한 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리입니다.대부분의 사람들은 JavaScript로 React를 쓰지만 React와 TypeScript의 인연은 매우 좋으니 반드시 TypeScript로 React를 시작해야 하지 않을까요?또한 React를 개발하는 과정에서 가장 번거로운 것은 상태 관리이다.이것을 없애기 위해서 Redux와 Undux를 사용하지만, 솔직히 웃기 어렵다.unstated를 사용하면 비교적 간단하게 상태 관리를 할 수 있다고 해서 이번에는 사용하고 싶다unstated.

개발 환경의 구축

설치 노드

이 페이지 에서 권장 버전을 설치하십시오.mac의 사람들은 nodebrew를 사용하고 Windows의 사람들은 nodist를 사용하면 간단하게 node 버전을 전환할 수 있기 때문에 그쪽을 사용하는 것이 좋을 것 같습니다.

create-react-app 명령 설치

터미널 또는 명령 프롬프트를 열고 다음 명령을 입력합니다.

$ npm install -g create-react-app

응용 프로그램의 모형을 만들다

create-react-app 명령을 사용하면 한 번에 응용 프로그램의 모형을 형성할 수 있습니다.옵션 - template typescript를 추가하여 TypeScript를 가져올 수 있습니다.

$ create-react-app my-app --template typescript

서버 시작

cd 명령으로 방금 만든 프로그램으로 이동하여 npmstart로 시작합니다.

$ cd my-app
$ npm start

방문http://localhost:3000/, 이런 화면이 나오면 성공한다.

계수 응용 프로그램 만들기

이번에는 간단한 계수 프로그램을 만들고 싶습니다.

구성 요소 제작

이번에는 계수를 표시하는 두 개의 구성 요소(Display.tsx)와 계수를 늘리는 단추(Button.tsx)를 만들고 싶습니다.src 바로 아래에서components 폴더를 만들어서 표시합니다.tsx 및 Button제작

src-
   |-components
         |-Display.tsx
         |-Button.tsx

Display.tsx

import React from 'react'

const Display: React.SFC = () => {
    return (
        <div>
            <h1>0</h1>
        </div>
    )
}

export default Display

Button.tsx

import React from 'react'

const Button: React.SFC = () => {
    return (
        <div>
            <button>add!</button>
        </div>
    )
}

export default Button

App.tsx

import React from 'react';
import Display from './components/Display';
import Button from './components/Button';

const App: React.FC = () => {
  return (
    <div>
      <Display />
      <Button />
    </div>
  );
}

export default App;

unstated 배포

"unstated"는 구성 요소의 "상태"부분과 외관 부분만 제거합니다.그래서 간단하게 가져올 수 있습니다.
이전의 구성 요소는 파일로 상태의 관리와 외관의 제작을 책임졌다.

이렇게 하면 상태를 다른 구성 요소에 다시 사용할 수 없습니다. 어떻게든 다른 구성 요소에 상태를 전달하고 싶을 때props를 통해 상태를 전달합니다.다만, 구성 요소의 구조가 복잡해지면props로 전달 상태가 무력해진다.그리고 프로스는 부모로부터 아이를 맡길 수 있지만 아이로부터 부모에게 맡길 수 없기 때문에 개발을 진행할 때 중간에 막힌다.

다른 한편, unstated는 외관 부분과 상태 부분으로 나뉜다.상태 부분을 용기라고 합니다.

부자 관계 없이 상태를 전달할 수 있다.

현재, 우리는 실제적으로 unstated를 배치할 것이다.

$ npm install unstated
$ npm install

unstated를 사용하려면 Provider로 둘러싸야 합니다.
App.tsx

import React from 'react'
import Display from './components/Display'
import Button from './components/Button'
import { Provider } from 'unstated'

const App: React.FC = () => {
  return (
    <Provider>
      <div>
        <Display />
        <Button />
      </div>
    </Provider>
  );
}

export default App;

컨테이너 만들기.src 바로 아래에 CountContainers 폴더를 만듭니다.제작

src-
   |-containers
   |     |-CountContainer.ts
   |
   |-components
         |-Display.tsx
         |-Button.tsx

CountContainer.ts

import { Container } from 'unstated'

interface IState {
    count: number
}

export default class CountContainer extends Container<IState> {
    public constructor() {
        super()
        this.state = {
            count: 0
        }
        this.addCount = this.addCount.bind(this)
    }

    public addCount() {
        this.setState({
            count: this.state.count + 1
        })
    }
}

container의state를 표시합니다.tsx에게 건네주다.
Display.tsx

import React from 'react'
import { Subscribe } from 'unstated'
import CountContainer from '../containers/CountContainer';

const Display: React.SFC = () => (
    <Subscribe to={[CountContainer]}>
        {(cCount: CountContainer) => {
            return (
                <div>
                    <h1>{cCount.state.count}</h1>
                </div>
            )
        }}
    </Subscribe>
)

export default Display

container의 addCount 함수를 Button이라고 합니다.tsx에게 건네주다.
Button.tsx

import React from 'react'
import { Subscribe } from 'unstated'
import CountContainer from '../containers/CountContainer';

const Button: React.SFC = () => (
    <Subscribe to={[CountContainer]}>
        {(cCount: CountContainer) => {
            return (
                <div>
                    <button onClick={cCount.addCount}>add!</button>
                </div>
            )
        }}
    </Subscribe>
)

export default Button

add 단추를 누르면 계수가 증가합니다.