Jaro의 공부하는 블로그입니다.

SPA 를 AWS S3 정적 웹 호스팅시 문제 해결

Jaro — Fri, 11 Aug 2017 00:57:01 +0900

최근 React를 이용하여 클라이언트 사이드 SPA 를 공부하고 있습니다.

작업한것을 aws s3의 웹 호스팅을 이용하여 올려서 테스트를 하고 있는데,

인덱스 주소가 아닌 다른 주소로 접근하거나 새로고침을 하면

404 페이지가 나오게 됩니다.

이것은 spa가 하나의 html을 갖고있기 때문인데요,

다른 주소로 접근시 예를들어 aaa/about 페이지 접근 혹은 새로고침시

about.html을 찾는데 없으니까 404 페이지를 띄워주게 됩니다.

이때 해결 방법은

이렇게 오류 문서에도 index.html을 호스팅 해주면 정상적으로 작동합니다.

(물론 에러페이지는 따로 만드셔야 합니다 )

홈페이지 제작중

Jaro — Tue, 8 Aug 2017 15:26:42 +0900

리액트를 이용하여 홈페이지를 제작해보고 있습니다.

최소한의 라이브러리 사용을 목표로 스터디를 위해 달려봅니다.

jaroinside.com

현재 공부하는 목록

Jaro — Mon, 7 Aug 2017 13:09:38 +0900

Todo

HTML, CSS 기초부터 다시

react

typescript

firebas

aws

최근 공부를 하면서 깨닫는 점

Jaro — Sat, 5 Aug 2017 03:17:08 +0900

최근 취업준비로 기술공부를 하면서 느끼는점.

근 2년간 실무를 접하면서 나름 노하우도 쌓이고, 기술에 대해 아주 조금은 알고있다고 생각했지만, 아니었다는 점.

특히, 어떠한 기능을 이름도 모르고, 왜 쓰는지도 모르면서 그냥 쓰고 있었다는점.

마치 글을 모르면서 말은 할줄 아는 까막눈처럼 사용할줄만 아는 것들이 많다는 점.

언제 무너질지 모르는 부실공사처럼 기초가 너덜너덜하다는 점

다만.. 이제라도 깨달았으니 빠르게 기초공사를 다시 한다는 점.

기술적 까막눈이 되지 말자!!

클라우드 컴퓨팅. 그리고 서비스

Jaro — Thu, 3 Aug 2017 21:08:43 +0900

클라우드 컴퓨팅

cloud 미국·영국 [klaʊd]

[명사] 구름

<네이버 어학사전>

클라우드 컴퓨팅에서의 클라우드( cloud )는 통신망, 즉 인터넷을 의미합니다.

수많은 하드웨어와 소프트웨어등과 같은 자원들이 통신망으로 연결되어 하나의 커다란 구름처럼 형상화 되어 붙여진 이름 이라고 생각됩니다.

즉 인터넷이 보장된 환경이라면, 언제, 어디서든 동일한 시스템을 사용 가능하게 보장해 주는것을 의미합니다.

< 사진출처 : 나무위키 - 클라우드 컴퓨팅>

https://namu.wiki/w/%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C%20%EC%BB%B4%ED%93%A8%ED%8C%85

기술의 발전은 클라우드 환경을 더욱더 발전시키고 있으며, 클라우드 컴퓨팅 서비스 또한 계속해서 증가하고 있습니다.

클라우드 컴퓨팅 서비스는 클라우드 서비스 플랫폼에서 컴퓨트, 스토리지, 데이터베이스 등등 여러 IT 리소스를 필요에 따라 제공하고, 사용한 만큼만 요금을 지불하는 것을 의미합니다.

클라우드 컴퓨팅 서비스 유형에는 여러가지가 있지만, 대표적으로 인프라(IaaS), 서비스로서의 플랫폼(PaaS), 서비스로서의 소프트웨어(SaaS), 백엔드(BaaS) 서비스가 있습니다.

1. IaaS - Infrastructure as a Service

IaaS는 서버, 스토리지, 네트워크를 가상화 환경으로 만들어, 필요에 따라 인프라 자원을 사용할 수 있게 서비스를 제공하는 형태입니다. 클라우트 컴퓨팅 서비스 모델 중에서 가장 많은 업체가 사용하는 유형으로, IaaS를 사용하는 경우, 서버의 설정이나 관리는 사용자가 직접 하고 운영하여야 합니다.

서비스로서의 인프라는 IT 리소스에 대해 가장 높은 수준의 유연성과 관리 제어를 제공하며 오늘날 많은 IT 부서와 개발자에게 익숙한 기존 IT 리소스와 가장 비슷합니다.

대표적으로는 AWS의 S3 와 EC2 서비스가 IaaS 서비스입니다.

2. PaaS - Platform as a Service

PaaS는 사용자에게 애플리케이션을 개발하는 데 필요한 개발환경, 프레임워크 등의 플랫폼을 제공하는 서비스입니다. 기본 인프라(일반적으로 하드웨어와 운영 체제)를 관리할 필요가 없어 애플리케이션 개발과 관리에 집중할 수 있습니다. 즉, 애플리케이션 실행과 관련된 리소스 구매, 용량 계획, 소프트웨어 유지 관리, 패치 또는 다른 모든 획일적인 작업에 대한 부담을 덜어 더욱 효율적이 되도록 해줍니다.

대표적으로는 구글 앱엔진(Google App Engine)과 윈도 애저(Window Azure)가 PaaS 서비스입니다.

3. SaaS - Software as a Service

SaaS 는 서비스 제공자에 의해 실행되고 관리되는 완전한 제품을 제공합니다.

예를들어, 이전에 개인 PC에 설치하여 사용하던 애플리케이션 제품을 클라우드 상에서 서비스하는것을 의미합니다. SaaS 오퍼링을 사용하면 서비스가 어떻게 유지 관리되는지 또는 기본 인프라가 어떻게 관리되는지 생각할 필요가 없으므로 개발 혹은 유지 관리 없이 해당 특정 소프트웨어를 어떻게 사용할지만 생각하면 됩니다.

대표적으로는 Salesforce Sales Cloud, Google Docs, Microsoft Office 365 등이 SaaS 서비스입니다.

4. BaaS - Backend as a Service

BaaS는 모바일 앱 & 웹 앱 개발 시 자주 사용하는 공통적인 백엔드(서버) 기능들을 표준화하여 API형태로 제공합니다.

즉 BaaS를 통해 개발자들은 백엔드플랫폼을 개발하지 않고 서비스형태로 빌려 사용하게 되어, 프론트엔드 개발에 집중할 수 있게 됩니다. BaaS 사업자가 제공하는 백엔드기능에는 일반적으로 데이터저장(data storage), 사용자관리(user management), 푸시알림(push notifications), 위치서비스(location services), 데이터분석(analytics) 등이 해당됩니다. 최근에는 계정등록, 구매확인, 이용자 발생 알림, 패스워드 재설정 등을 구성할 수 있는 거래 이메일 발송 기능도 고객유지 및 참여 전략의 일환으로 BaaS 플랫폼을 통해 제공되고 있습니다.

대표적으로는 google의 firebase 입니다.

결론적으로는 클라우드 컴퓨팅은 로컬이 아닌 인터넷 상에서 컴퓨팅 환경을 조성하는것을 의미하고,

그에 따라 서비스들이 존재하는데,

IaaS는 가장 기본적인 컴퓨팅 환경을 서비스 해주는 것이고,

PaaS는 개발에 필요한 플랫폼을 서비스 해주는 것입니다. 즉 IaaS보다는 좀더 많은것을 서비스 해주는 형태로, 개발에 필요한 틀(?) 을 서비스 해준다고 생각할수 있습니다.

SaaS는 아예 애플리케이션 자체를 서비스 해주는 형태로, 완성품을 서비스 해준다고 생각할수 있습니다.

BaaS는 개발 과정중 프론트 엔드 개발에만 집중할수 있도록 백엔드 개발에 관한것을 서비스 해주는 형태입니다.

따라서 각 서비스의 특징을 확실하게 알아두는것이 추후 개발에 있어 매우 도움이 될것이라 생각됩니다.

이번 포스팅은 React-typescript를 포스팅 하던 도중, firebase로 사용해보기 위해 공부를 하다가 포스팅을 하게 되었습니다. 막연하게 클라우드 컴퓨팅이라는 단어만 알고 개발을 하는 것보다는 각각의 서비스 유형을 알고 사용하는것이 조금이라도 더 좋지 않을까 라는 생각에 시작하였습니다.

다음에는 FireBase를 공부, 사용해보고 포스팅을 진행하겠습니다.

기본적으로는 위키를 참고하였고, AWS의 클라우드컴퓨팅 문서도 참고하였습니다(https://aws.amazon.com/ko/what-is-cloud-computing/)

또한 ETRI의 문서도 참고 하였습니다. (https://ettrends.etri.re.kr/ettrends/pubreader.do?volume=30&issue=4&page=191&paperno=0905002069)

감사합니다.

Hoisting - 호이스팅

Jaro — Thu, 3 Aug 2017 04:55:21 +0900

Hoisting - 호이스팅

hoist 미국·영국 [hɔɪst] 영국식 중요

1. (흔히 밧줄이나 장비를 이용하여) 들어올리다
2. (화물・장애인을 들어올리기 위한) 승강 장치

출처: 네이버 어학사전

JavaScript에서, 함수 및 변수는 끌어올려(hoisted)집니다.

호이스팅은 선언을 scope(전역 범위 또는 현재 함수 범위)의 상단으로 이동하는 JavaScript의 행동입니다.

아래와 같은 함수가 있습니다.

function hoisting() {
  console.log(value);
  var value = 'hoisting';
}
hoisting();

이 함수를 실행할 경우 콘솔에는 어떠한 값이 찍힐까요?

바로 undefined 가 출력됩니다.

왜냐하면, 이 함수는 javascript내에서 해석되기를, 함수안에서 생성된 변수 이므로

함수의 최상단에서 선언되는것으로 호이스팅 되고, 결과적으로 콘솔을 출력할때에는 변수는 선언만 되어있는 상태이므로 undefined가 출력되는것입니다.

즉 아래와 같이 해석됩니다.

function hoisting() {
  var value;
  console.log(value);
  value = 'hoisting';
}
hoisting();

그렇다면 이번에는

function hoisting() {
  console.log(value);
  var value = 'hoisting';
}

var hoisting;

console.log(hoisting);

이러한 코드가 있을때, 콘솔에 출력되는 값을 무엇일까요?

바로 [Function: hoisting] 이 출력됩니다.

왜냐하면 변수가 함수 안쪽이 아닌 전역에서 선언되었으므로 최상단으로 호이스팅 되어

결과적으로는

var hoisting;

function hoisting() {
  var value;
  console.log(value);
  value = 'hoisting';
}

console.log(hoisting);

이렇게 해석되기 때문입니다.

하지만 만약에

function hoisting() {
  console.log(value);
  var value = 'hoisting';
}

var hoisting = 'hoisting!'

console.log(hoisting);

이렇게 변수에 값을 할당할 경우에는

var hoisting;

function hoisting() {
  var value;
  console.log(value);
  value = 'hoisting';
}

hoisting = 'hoisting!';

console.log(hoisting);

호이스팅은 되지만 함수 아래에서 다시 변수에 값을 할당하므로

콘솔에는 hoisting! 이 출력됩니다.

이러한 호이스팅은 신경쓰지 않으면 버그 생성등의 문제가 발생할수 있으므로 주의하여야 합니다.

* 다만, es6의 let, const를 사용한다면 자동적으로 호이스팅 문제는 해결됩니다.

function hoisting() {
  console.log(value);
  let value = 'hoisting';
}
hoisting();

이 코드는 실행되지 않고 에러를 출력합니다.

왜냐하면 호이스팅이 일어나지 않으므로 console.log는 value가 무엇인지 알지 못하기 때문입니다.

역시 전역에서도 마찬가지로 호이스팅은 일어나지 않습니다.

결론은.... 음.. 호이스팅에 대해 기억하고 let, const를 잘 사용하자?? 입니다 :)

14.mobx-part3

Jaro — Thu, 3 Aug 2017 03:52:56 +0900

@computed

getter함수에만 사용이 가능한, @observable과 유사한 기능을 갖습니다.

* Javascript es6 의 getter를 모르시는 분들은 이곳을 참고해 주세요.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/get

하지만 observable과 가장 큰 차이점은 최적화의 문제입니다.

observable은 값이 변경될때마다 무조건 렌더링을 다시 하지만,

실제 사용할 값을 computed해놓고 사용한다면, observable값이 변경되더라도, computed 에 명시된 값에 부합하지 않다면, 재 렌더링 하지 않습니다.

사용법은 역시 함수로 사용하는 방법과 데코레이터를 사용하는 방법이 존재합니다.

이번포스팅에서 부터는 함수로 사용하는 방법에 대해서는 예제를 만들지 않겠습니다.

( 거의 사용 하지 않습니다. 특히 타입스크립트에서는.. )

데코레이터를 사용하는 예제를 작성해 보도록 하겠습니다.

이전에 사용하던 프로젝트의 AgeStore.tsx 파일에 computed를 추가하겠습니다.

import { observable, computed } from 'mobx';

export default class AgeStore {
    
    @observable 
    private _age: number = 30;

    constructor(age: number) {
        this._age = age;
    }

    @computed
    get age(): number {
        return (this._age > 40) ? this._age : 0;
    }
    
    public getAge(): number {
        return this._age;
    }
    public setAge(age: number): void {
        this._age = age;
    }

}

만약 this._age가 40이 넘는다면 렌더링을 하고 그렇지 않으면 0을 렌더링 할것입니다.

그리고 age 컴포넌트를 변경하겠습니다.

<h1>{ageState.age}</h1>

이전에는 getAge() 를 렌더링 했지만 이번에는 computed로 지정한 age를 렌더링 합니다.

실행해 보겠습니다.

실행하였을때 0이 나오는것을 볼수 있습니다.

왜냐하면 실행하였을때 this._age의 값은 30이니까요.

여기서 나이증가 버튼을 계속 누르다 보면,

짠 렌더링이 실시됩니다.

즉 this._age값은 계속 변화하였지만 computed로 인해 렌더링이 되지 않고 값만 변화하였다가

40이 넘어가는 순간부터 렌더링을 실시하게 된것입니다.

예제에서는 단순하게 하였지만, 좀더 정밀하게 구성한다면, 렌더링을 최적화 하는데 매우 큰 도움이 될것으로 예상됩니다.

* 만약 setter 함수를 사용하여 값을 변화시키고, 같은 이름의 getter 함수를 computed 해놓았다면,

setter 함수 호출후에는 반드시 getter 함수가 호출됩니다.

하지만 이때 반드시 getter 함수 정의후 setter 함수를 정의 하여야 합니다.

https://mobx.js.org/refguide/computed-decorator.html

@action - 추후에 내용을 보강할 계획입니다.

action은 state를 수정하는 함수입니다. ( observable이 있는 프로퍼티를 수정 )

옵셔널한 기능이므로 사용해도, 안해도 됩니다.

하지만 mobx의 use-strict 모드를 사용한다면, state를 변경하는 함수에는 반드시 사용해야 합니다.

예시로 살펴보겠습니다.

우선 src/index.tsx에 use-strict 모드를 적용하겠습니다.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { App } from './containers';
import registerServiceWorker from './registerServiceWorker';
import './index.css';

import { useStrict } from 'mobx';

useStrict(true);

ReactDOM.render(
  <App />,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

그리고 실행하면 컴파일에서는 오류가 전혀 발생하지 않습니다.

그러나 실행화면에서 버튼을 눌러 state를 변경하려고 하는 순간

에러를 발생시킵니다.

대충 봐도 action을 쓰라고 써있습니다.

그렇다면 action 을 사용해야겠습니다.

AgeStore.tsx 파일에 적용하겠습니다.

import { observable, computed, action } from 'mobx';

export default class AgeStore {
    
    @observable 
    private _age: number = 30;

    constructor(age: number) {
        this._age = age;
    }

    @computed
    get age(): number {
        return (this._age > 40) ? this._age : 0;
    }
    
    public getAge(): number {
        return this._age;
    }
    @action
    public setAge(age: number): void {
        this._age = age;
    }

}

간단하게 observable된 프로퍼티 값을 바꾸는 함수에 @action을 추가하면 됩니다.

https://mobx.js.org/refguide/action.html

@inject와 Provider

이전에 Redux에서 쓰던 Provider와 똑같이 사용합니다.

다른점은, 이전에 redux에서는 provider로 넘긴 props를 사용하기 위해서는

컴포넌트를 컨네이터로 감싼뒤 mapStateToProps, mapDispatchToProps를 작성하여 사용가능하게 만들었습니다. 하지만 mobx에서는 @inject 선언으로 사용이 가능합니다. 심플하게..

예제를 만들어 보겠습니다.

src/index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { App } from './containers';
import registerServiceWorker from './registerServiceWorker';
import './index.css';

import { useStrict } from 'mobx';
import { Provider } from 'mobx-react';
import { AgeStore } from './stores';

useStrict(true);

const ageState = new AgeStore(30);

ReactDOM.render(
  <Provider store = {ageState}>
    <App />
  </Provider>,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

AgeStore를 Provider를 통해 props로 내려주겠습니다.

그리고 Age 컴포넌트에서 사용해 보겠습니다.

src/components/Age.tsx

import * as React from 'react';

import { observer, inject } from 'mobx-react';

import { AgeStore } from '../stores';

@inject('store')
@observer
class Age extends React.Component<{ store?: AgeStore; }, {}> {
  constructor(props: {}) {
    super(props);
  }

  componentWillReact() {
    console.log('componentWillReact');
  }
  componentWillUpdate() {
    console.log('componentWillUpdate');
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
  }

  render() {
    console.log('render');
    const store = this.props.store as AgeStore;
    return (
      <div className="Age">
        <h1>{store.age}</h1>
        <button onClick={() => store.addAge()}>나이증가</button>
      </div>
    );
  }
}

export default Age;

정말 간단하게 @inject('store') 명령으로 가져오는것이 가능합니다.

하지만 여기서 중요한것은 typescript이므로 props의 타입을 지정해줘야 하는데

stroe를 타입으로 지정해주면 됩니다.

또한 사용하기 위해서는

const store = this.props.store as AgeStore;

처럼 명시해주어야 사용이 가능합니다.

* 저는 이번 예제를 좀더 깔끔하게 사용 하기 위해 addAge함수를 store에 넣었습니다.

import { observable, computed, action } from 'mobx';

export default class AgeStore {
    
    @observable 
    private _age: number = 30;

    constructor(age: number) {
        this._age = age;
    }

    @computed
    get age(): number {
        return (this._age > 40) ? this._age : 0;
    }
    
    public getAge(): number {
        return this._age;
    }
    @action
    public setAge(age: number): void {
        this._age = age;
    }
    @action
    public addAge(): void {
        this._age = this._age + 1;
    }

}

autorun

autorun은 observers 자체를 가지지 않는 리액션 함수를 만들고자하는 경우에 사용할 수 있습니다.

일반적으로 로깅, 지속성 또는 UI 업데이트 코드와 같이 반응적인 코드에서 명령형 코드로 연결해야하는 경우입니다. autorun과 computed는 비슷하게 보이지만, 완전히 다르게 동작합니다.

autorun을 사용하면, 종속성 중 하나가 변경 될 때마다 무조건 다시 트리거 되는 반면에,

computed는 상황에 따라 트리거 됩니다.

따라서 자동으로 실행되어야 하지만, 새로운 값을 결과로 내놓지 않는 함수가 있다면 autorun을 사용하고, 그렇지 않다면 computed를 사용하는 것이 좋습니다.

* 그래서 autorun 은 거의 대부분 로그를 출력하는데 이용됩니다.

예제를 통해 살펴보겠습니다.

src/stores/AgeStore.tsx

import { observable, computed, action, autorun } from 'mobx';

export default class AgeStore {
    
    @observable 
    private _age: number = 30;

    constructor(age: number) {
        this._age = age;
    }

    @computed
    get age(): number {
        return (this._age > 40) ? this._age : 0;
    }
    
    public getAge(): number {
        return this._age;
    }
    @action
    public setAge(age: number): void {
        this._age = age;
    }
    @action
    public addAge(): void {
        this._age = this._age + 1;
    }

    public ageLog(): Function {
        return autorun(() => {
            if (this.getAge() > 50) {
                window.alert('나이가 너무 많아');
            }
            console.log('Age', this.getAge());
        });
    }

}

age 로그라는 함수를 만들어 autorun 함수를 return 하게 하였습니다.

여기서는 getAge하였는데 그 값이 50 이상일 경우에는 경고창을 띄우도록 하였고,

그렇지 않으면 콘솔을 띄우도록 하였습니다.

src/components/Age.tsx

import * as React from 'react';

import { observer, inject } from 'mobx-react';

import { AgeStore } from '../stores';

@inject('store')
@observer
class Age extends React.Component<{ store?: AgeStore; }, {}> {

  private store = this.props.store as AgeStore;

  constructor(props: {}) {
    super(props);
    this.store.ageLog();
  }

  componentWillReact() {
    console.log('componentWillReact');
  }
  componentWillUpdate() {
    console.log('componentWillUpdate');
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
  }

  render() {
    console.log('render');
    return (
      <div className="Age">
        <h1>{this.store.age}</h1>
        <button onClick={() => this.store.addAge()}>나이증가</button>
      </div>
    );
  }
}

export default Age;

그리고 Age컴포넌트에서는 생성자 함수에서 ageLog를 실행하도록 하였습니다.

프로젝트를 실행해보겠습니다.

실행후 버튼을 누르면, age가 50이 되기 전까지는 증가된 값이 그냥 콘솔만 표시됩니다.

( 물론 이전에 computed때문에 렌더링은 되지 않습니다.)

하지만 50이 넘어가는 순간 경고창을 띄웁니다.

이런식으로 autorun을 사용하게 되는데, 경고창이 아닌 에러를 발생시켜 다른 작업을 할수도 있고,

활용법은 많을것으로 예상됩니다.

https://mobx.js.org/refguide/autorun.html

이번 포스팅까지가 mobx의 포스팅였습니다.

아마 다음 포스팅까지는 조금 시간이 걸릴듯 합니다.

남은 포스팅은 todoApp 예제와, react 서버사이드 렌더링 구현, 테스팅, nextjs 가 남아있는데,

그 전에 선수지식이 필요할듯 하여 좀더 공부를 한 뒤 포스팅을 할 예정입니다.

빠르게 공부하여 다시 react-typescript의 포스팅을 이어가도록 하겠습니다.

감사합니다.

이번 포스팅의 소스코드입니다.

https://github.com/JaroInside/tistory-react-typescript-study/tree/14.mobx-part3

참고 슬라이드 - http://slides.com/woongjae/react-with-typescript-4 #/
참고 동영상 - https://www.youtube.com/playlist?list=PLV6pYUAZ-ZoHx0OjUduzaFSZ4_cUqXLm0

14.mobx-part2

Jaro — Tue, 1 Aug 2017 02:05:35 +0900

이전포스팅에서 간단하게 mobx를 사용해보았습니다.

이번 포스팅에서는 mobx에 있는 여러 기능들에 대해 알아보는 포스팅을 해보도록 하겠습니다.

observable

observable은 관찰하고자 하는 값에 사용합니다.

obsevable을 사용하는 방법에는 2가지가 있습니다.

1. 일반 function 으로 사용

2. 데코레이터로 사용

일반 function 으로 사용하는것은 매우 간단하게 사용이 가능합니다.

이전 포스팅에서 사용한 프로젝트를 재 사용하여 예제를 만들어 보겠습니다.

stores 폴더에 AgeStore2.tsx 파일을 만들고 함수형태의 observable을 사용해 보겠습니다.

import { observable } from 'mobx';

const Age2 = observable({
    age: 35
});

export default Age2;

그냥 관찰하고자 하는 값에 observable 함수를 사용하기만 하면 됩니다.

stores/index.tsx

import AgeStore from './AgeStore';
import Age2 from './AgeStore2';

export { AgeStore, Age2 };

그리고 Age 컴포넌트에서 사용해보겠습니다.

import * as React from 'react';

import { AgeStore, Age2 } from '../stores';

import { observer } from 'mobx-react';

const ageState = new AgeStore(30);

@observer
class Age extends React.Component<{}, {}> {
  constructor(props: {}) {
    super(props);
    this.addAge = this.addAge.bind(this);
    this.addNumber = this.addNumber.bind(this);
  }
  render() {
    return (
      <div className="Age">
        <h1>{ageState.getAge()}</h1>
        <button onClick={() => this.addAge()}>나이증가</button>
        <h1>{Age2.age}</h1>
        <button onClick={() => this.addNumber()}>나이증가</button>
      </div>
    );
  }
  addAge() {
    const age = ageState.getAge();
    ageState.setAge(age + 1);
    console.log(ageState.getAge());
  }
  addNumber() {
    Age2.age = Age2.age + 1;
  }
}

export default Age;

이전 코드에서 Age2를 추가하고, 이벤트 핸들러를 추가한다음, 적용시켰습니다.

이상없이 작동하는것을 확인할수 있습니다.

데코레이터로 사용하는 방법은 이미 사용해보았기 때문에 사용 방법은 아실거라 생각합니다.

다만 기억하실점은, 데코레이터로 사용을 하신다면, 반드시 클래스의 프로퍼티에만 사용이 가능함을 기억하셔야 합니다.

다른곳에서는 사용이 불가합니다.

만약 여러 프로퍼티를 사용한다면 여러개의 observable을 사용하면 됩니다.

observer

observer는 observable된 값 변화에 따라 반응하는 컴포넌트에 사용합니다.

역시 observable과 같이 사용하는 방법에는 2가지 방식이 존재합니다.

1. 데코레이터 없이 사용하는 방법

2. 데코레이터로 사용하는 방법

데코레이터 없이 사용하는 방법은 observer(<컴포넌트>); 의 형식으로 사용하면 됩니다.

만약 state를 전혀 사용하지 않는 컴포넌트일 경우, 일반적으로는 stateless component, 즉 SFC를 사용하였는데, mobx를 사용할 경우에는 SFC 대신 observer를 사용하면 됩니다.

즉 이전 예제의 Age 컴포넌트를

const Age = observer(() => {
  function addAge(): void {
    const age = ageState.getAge();
    ageState.setAge(age + 1);
    console.log(ageState.getAge());
  }
  function addNumber(): void {
    Age2.age = Age2.age + 1;
  }
  return (
    <div className="Age">
      <h1>{ageState.getAge()}</h1>
      <button onClick={() => addAge()}>나이증가</button>
      <h1>{Age2.age}</h1>
      <button onClick={() => addNumber()}>나이증가</button>
    </div>
  );
});

이렇게 사용이 가능합니다.

데코레이터를 사용할 경우에는 컴포넌트 클래스의 상단에 사용하면 되는데,

만약 observer 데코레이터를 사용할 경우에는 주의할 점이 있습니다.

바로 Lifecycle이 mobx의 라이프 사이클로 바뀐다는 점입니다.

이전에 Lifecycle 포스팅에서 ( http://jaroinside.tistory.com/18 ) react의 update lifecycle은

componentWillReceiveProps(nextProps)

shouldComponentUpdate(nextProps, nextState)

componentWillUpdate(nextProps, nextState)

render()

componentDidUpdate(prevProps, prevState)

이렇게 5개의 라이프 사이클이 존재하고 순서대로 작동한다고 하였습니다.

하지만 observer 데코레이터를 사용하면 라이프사이클은,

- componentWillReact

- componentWillUpdate

- render

- componentDidUpdate

의 순서로 실행되게 됩니다. ( 주의 ! )

- 확인을 위한 코드 -

import * as React from 'react';

import { AgeStore, Age2 } from '../stores';

import { observer } from 'mobx-react';

const ageState = new AgeStore(30);

@observer
class Age extends React.Component<{}, {}> {
  constructor(props: {}) {
    super(props);
    this.addAge = this.addAge.bind(this);
    this.addNumber = this.addNumber.bind(this);
  }

  componentWillReact() {
    console.log('componentWillReact');
  }
  componentWillUpdate() {
    console.log('componentWillUpdate');
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
  }

  render() {
    console.log('render');
    return (
      <div className="Age">
        <h1>{ageState.getAge()}</h1>
        <button onClick={() => this.addAge()}>나이증가</button>
        <h1>{Age2.age}</h1>
        <button onClick={() => this.addNumber()}>나이증가</button>
      </div>
    );
  }
  addAge() {
    const age = ageState.getAge();
    ageState.setAge(age + 1);
  }
  addNumber() {
    Age2.age = Age2.age + 1;
  }
}

export default Age;

- 첫번째 render 는 첫 render 입니다 -

이번 포스팅은 조금 짧게 하였습니다.

다음 포스팅에서는 이전 예제에서 다뤄보지 않은 computed, action, inject, provider등을 포스팅 하겠습니다.

감사합니다.

소스코드 주소입니다.

https://github.com/JaroInside/tistory-react-typescript-study/tree/14.mobx-part2

참고 슬라이드 - http://slides.com/woongjae/react-with-typescript-4 #/

참고 동영상 - https://www.youtube.com/playlist?list=PLV6pYUAZ-ZoHx0OjUduzaFSZ4_cUqXLm0

자바스크립트 이벤트 - Javascript Event

Jaro — Mon, 31 Jul 2017 18:07:00 +0900

이벤트

이벤트는 키보드로 키를 입력하거나, 마우스 클릭과 같이 다른 것에 영향을 미치는 것을 의미합니다. 이벤트는 사용자가 발생시킬수도 있고, application 스스로 발생시킬 수도 있습니다.

이벤트 관련 용어

이벤트 연결, 이벤트 이름, 이벤트 속성, 이벤트 핸들러, 이벤트 모델

예시를 사용하여 살펴보겠습니다.

간단하게 index.html 파일을 생성하고, 코드를 작성해주세요.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      #EventDom {
        width: 500px;
        height: 500px;
        background-color: red;
      }
    </style>
    <title>Event Study</title>
  </head>
  <body>
    <div id="EventDom"></div>
    <script>
      window.onload = whenLoad;

      function whenLoad() {
        // 변수 선언
        let dom = document.getElementById('EventDom');

        // 이벤트 연결
        function whenClick() { alert('CLICK'); };
        dom.onclick = whenClick;
      }
    </script>
  </body>
</html>

화면에 가로 500px, 세로 500px 의 dom 을 생성하고, EventDom 이라는 id를 부여하였습니다.

한번 index.html을 브라우져로 열어 클릭하여 확인해보시기 바랍니다.

이벤트 연결

여기서 이벤트 연결은 총 2가지 입니다.

첫번째는 winodw의 onload 속성에 이벤트를 연결하였고, 두번째는 dom의 onclick 속성에 이벤트를 연결하였습니다.

이벤트 이름

이벤트 연결이 2가지 이므로 이름 또한 2가지가 존재합니다.

window객체의 경우에는 load, dom 객체의 경우에는 click이 이벤트 이름이 됩니다.

이벤트 속성

이벤트 연결에서 언급하였듯, 이벤트를 연결하는 객체의 속성을 이벤트 속성이라고 합니다.

window에서는 onload, dom에서는 onclick 이 이벤트 속성입니다.

이벤트 핸들러

window 객체의 onload에서의 이벤트 핸들러는 whenLoad 입니다.

dom 객체의 onclick에서의 이벤트 핸들러는 whenClick입니다.

즉 이벤트 핸들러는 이벤트가 일어났을때 이벤트에 따라 작업을 하게 하는 객체 혹은 함수를 의미합니다.

이벤트 모델

문서 객체에 이벤트를 연결하는 방법을 이벤트 모델이라고 합니다.

이벤트 모델은 DOM level 단계에 따라 두가지로 분류할수 있으며, 각기 두가지로 또 나뉩니다.

즉 총 4가지의 방법으로 이벤트를 연결할수 있습니다.

* DOM Level 0

- 고전 이벤트 모델

- 인라인 이벤트 모델

* DOM Level 2

- 마이크로소프트 인터넷 익스플로러 이벤트 모델

- 표준 이벤트 모델

위 예제에서 사용한 방법은 자바스크립트에서 문서 객체의 이벤트 속성을 사용해 이벤트를 연결하는 방법으로, DOM Level0 의 고전 이벤트 모델입니다.

인라인 이벤트 모델은 HTML 페이지의 가장 기본적인 이벤트 연결방법으로, 위 예제의 dom click 이벤트를 인라인 이벤트 방식으로 바꿔보겠습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      #EventDom {
        width: 500px;
        height: 500px;
        background-color: red;
      }
    </style>
    <script>
      function whenClick(e) { alert('CLICK'); };
    </script>
    <title>Event Study</title>
  </head>
  <body>
    <div id="EventDom" onclick="whenClick(event)"></div>
  </body>
</html>

* script를 head에 포함시킨 이유는, 아래에 넣을경우, EventDom이 생성될때 onclick에 whenClick이 아직 명시되지 않은 상태이므로 원하는대로 이벤트가 바인딩 되지 않습니다.

따라서 head에 넣어주어야 정상적으로 작동하게 됩니다.

예제와 같은 방법으로, 태그의 이벤트 속성에 인라인 형식으로 이벤트를 연결하는 방식을 인라인 이벤트 모델이라고 합니다.

한번 index.html을 브라우져로 열어 클릭하여 확인해보시기 바랍니다.

DOM Level0 의 두 이벤트 모델은 한번에 하나의 이벤트 핸들러만 가질수 있는 단점이 있습니다.

이러한 단점을 보완하기 위해 만들어진 이벤트 모델이 DOM Level 2 이벤트 모델로써,

마이크로 소프트 익스플로러 모델과 표준 이벤트 모델이 있습니다.

하지만 마이크로 소프트 익스플로러 모델의 경우 ie 10까지만 지원하고 11 부터는 표준 이벤트 모델과 동일한 함수를 사용합니다. 따라서 마이크로 소프트 익스플로러 모델은 낮은 버젼의 웹 개발을 하는 경우가 아니라면 굳이 신경쓰지 않아도 될거 같습니다.

표준 이벤트 모델은 웹 표준을 만드는 W3C에서 공식적으로 지정한 이벤트 모델입니다.

역시 여러 이벤트 핸들러를 추가할수 있으며, 이벤트 캡쳐링을 지원합니다.

( 표준 이벤트 모델은 익스플로러 9부터 지원합니다.)

표준 이벤트 모델에서의 이벤트 연결, 제거 시에는 아래와 같은 메서드를 사용합니다.

addEventListener(eventName, handler, useCapture)

removeEventListener(eventName, handler)

예제로 만들어 보겠습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      #EventDom {
        width: 500px;
        height: 500px;
        background-color: red;
      }
    </style>
    <title>Event Study</title>
  </head>
  <body>
    <div id="EventDom"></div>
    <script>
      window.addEventListener('load', function() {
        let dom = document.getElementById('EventDom');

        dom.addEventListener('click' , function() {
          console.log('클릭');
        });
        dom.addEventListener('click' , function() {
          dom.style.backgroundColor="blue";
        });
        dom.addEventListener('click' , function() {
          alert('클릭');
        });
      });
    </script>
  </body>
</html>

addEventListener를 이용하여 EventDom 클릭시 3개의 이벤트가 발생하도록 하였습니다.

만약 이전의 고전 이벤트 모델처럼 이벤트 핸들러를 작성하고

dom.onclick = whenClick;

과 같은 방식으로 이벤트를 여러번 연결한다면,

가장 마지막에 연결한 이벤트만 연결되겠지만, 표준 이벤트 모델을 이용한다면 여러 이벤트를 연결할수 있습니다.

이벤트 전달

이벤트 전달이란, Dom이 여러개일때, 어떠한 이벤트가 먼저 발생해 어떤순서로 발생하는지 정하는것을 의미합니다.

이벤트 전달방식에는 2가지 방식이 존재합니다.

1. 이벤트 캡쳐링

이벤트 캡쳐링은 이벤트의 흐름이 상위노드에서 하위 노드로 흘러가는것을 의미합니다.

즉 어느 한 Dom에 이벤트가 발생하면 그 Dom이 속한 최상위 노드에서부터 이벤트가 실행되어 실제 이벤트가 발생한 Dom까지 순차적으로 이벤트가 발생하는 구조입니다.

사용법은 addEventListener(eventName, handler, useCapture) 에서 useCapture를 true로 해주시면 됩니다.

예제를 통해 알아보겠습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      #GrandParent {
        width: 500px;
        height: 500px;
        background-color: red;
      }

      #Parent {
        width: 400px;
        height: 400px;
        background-color: orange;
      }

      #Me {
        width: 300px;
        height: 300px;
        background-color: yellow;
      }

      #Child {
        width: 200px;
        height: 200px;
        background-color: green;
      }

      #GrandChild {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
    <title>Event Study</title>
  </head>
  <body>
    <div id="GrandParent">
      <div id="Parent">
        <div id="Me">
          <div id="Child">
            <div id="GrandChild"></div>
          </div>
        </div>
      </div>
    </div>
    <script>
      window.addEventListener('load', function(){
        var GrandParent, Parent, Me, Child, GrandChild;

        GrandParent = document.getElementById("GrandParent");
        Parent = document.getElementById("Parent");
        Me = document.getElementById("Me");
        Child = document.getElementById("Child");
        GrandChild = document.getElementById("GrandChild");

        GrandParent.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
        }, true);

        Parent.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
        }, true);

        Me.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
        }, true);

        Child.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
        }, true);

        GrandChild.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
        }, true);
        
      });
    </script>
  </body>
</html>

이 코드는 5개의 사각형이 존재하며 최상위에는 GrandParent가 존재하고,

가장 아래에는 GrandChild가 존재합니다. 각각 click하였을때, 콘솔로 자신의 id를 표시하게 만들었습니다.

만약 이 상태에서 Me, 즉 노란색 부분을 클릭하게 되면 이벤트는 어떤 순서로 발생이 되는지 해보겠습니다.

노란색 부분, 즉 Me Dom을 클릭을 하였는데, 상위 노드의 이벤트부터 차례대로 실행되는것을 확인할수 있습니다.

즉

document -> html -> body -> GrandParent -> Parent -> Me 의 순서로 이벤트가 발생하였지만

document , html , body 에는 클릭 이벤트가 없으므로 GrandParent 부터 콘솔에 나타난것입니다.

* 인터넷 익스플로러는 캡쳐링을 지원하지 않습니다.

2. 이벤트 버블링

이번에는 이벤트 버블링을 살펴보겠습니다.

이벤트 버블링은 이벤트의 흐름이 하위 노드에서 상위 노드로 흘러가는것을 의미합니다.

즉 어느 한 Dom에 이벤트가 발생하면 그 Dom에서부터 이벤트가 시작하여 Dom이 속한 최상위 노드까지 이벤트가 실행되는 구조입니다.

예제입니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      #GrandParent {
        width: 500px;
        height: 500px;
        background-color: red;
      }

      #Parent {
        width: 400px;
        height: 400px;
        background-color: orange;
      }

      #Me {
        width: 300px;
        height: 300px;
        background-color: yellow;
      }

      #Child {
        width: 200px;
        height: 200px;
        background-color: green;
      }

      #GrandChild {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
    <title>Event Study</title>
  </head>
  <body>
    <div id="GrandParent">
      <div id="Parent">
        <div id="Me">
          <div id="Child">
            <div id="GrandChild"></div>
          </div>
        </div>
      </div>
    </div>
    <script>
      window.addEventListener('load', function(){
        var GrandParent, Parent, Me, Child, GrandChild;

        GrandParent = document.getElementById("GrandParent");
        Parent = document.getElementById("Parent");
        Me = document.getElementById("Me");
        Child = document.getElementById("Child");
        GrandChild = document.getElementById("GrandChild");

        GrandParent.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
        });

        Parent.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
        });

        Me.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
        }, true);

        Child.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
        });

        GrandChild.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
        });
        
      });
    </script>
  </body>
</html>

addEventListener(eventName, handler, useCapture) 에서 useCapture를 쓰지 않으면 버블링이 적용됩니다. ( default가 false)

위의 스크린샷은 실행후 파란색 사각형, GrandChild를 클릭했을때 일어난 이벤트입니다.

아까와는 반대로 클릭한 곳에서 이벤트가 일어났지만, 그 후에 이벤트가 일어난 Dom이 속해있는 상위노드의 이벤트도 모두 일어났음을 확인할수 있습니다.

그렇다면, 이벤트 캡쳐링, 버블링 모두 제대로 알지 않으면 원치않는 이벤트를 일으키게 된다는것을 느낄수 있습니다.

이러한 상황을 막기 위해서는 이벤트의 흐름을 차단할 필요가 있습니다.

이벤트 캡쳐링의 경우에는 useCapture를 false로 지정하면 막을수 있지만, 그렇게 되면 버블링이 작동하게 됩니다. 그렇다면 버블링을 막는 방법을 알면 될것 같습니다.

이벤트 버블링을 막는 방법에는 2가지 방법이 있습니다.

하나는 e의 cancelBubble 값을 true로 하는 방법과

e의 stopPropagation함수를 호출하는 방법입니다.

적용해 보겠습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      #GrandParent {
        width: 500px;
        height: 500px;
        background-color: red;
      }

      #Parent {
        width: 400px;
        height: 400px;
        background-color: orange;
      }

      #Me {
        width: 300px;
        height: 300px;
        background-color: yellow;
      }

      #Child {
        width: 200px;
        height: 200px;
        background-color: green;
      }

      #GrandChild {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
    <title>Event Study</title>
  </head>
  <body>
    <div id="GrandParent">
      <div id="Parent">
        <div id="Me">
          <div id="Child">
            <div id="GrandChild"></div>
          </div>
        </div>
      </div>
    </div>
    <script>
      window.addEventListener('load', function(){
        var GrandParent, Parent, Me, Child, GrandChild;

        GrandParent = document.getElementById("GrandParent");
        Parent = document.getElementById("Parent");
        Me = document.getElementById("Me");
        Child = document.getElementById("Child");
        GrandChild = document.getElementById("GrandChild");

        GrandParent.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
          e.stopPropagation();
        });

        Parent.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
          e.stopPropagation();
        });

        Me.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
          e.cancelBubble = true;
        });

        Child.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
          e.stopPropagation();
        });

        GrandChild.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
          e.cancelBubble = true;
        });
        
      });
    </script>
  </body>
</html>

실행하여 확인하면, 더이상 버블링이 일어나지 않는것을 확인할수 있습니다.

* 추가

preventDefault()

이 메소드는 이벤트 전달을 차단함과 동시에 그 dom이 가지고 있는 기본적인 기능또한 차단하는 기능을 가지고 있습니다.

위의 코드에 a 링크를 추가하고, test.html로 링크를 시켜놓겠습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      #GrandParent {
        width: 500px;
        height: 500px;
        background-color: red;
      }

      #Parent {
        width: 400px;
        height: 400px;
        background-color: orange;
      }

      #Me {
        width: 300px;
        height: 300px;
        background-color: yellow;
      }

      #Child {
        width: 200px;
        height: 200px;
        background-color: green;
      }

      #GrandChild {
        width: 100px;
        height: 100px;
        background-color: blue;
      }

      #test {
        width: 50px;
        height: 50px;
        color: white;
      }
    </style>
    <title>Event Study</title>
  </head>
  <body>
    <div id="GrandParent">
      <div id="Parent">
        <div id="Me">
          <div id="Child">
            <div id="GrandChild">
              <a id="Test" href="test.html">테스트링크</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      window.addEventListener('load', function(){
        var GrandParent, Parent, Me, Child, GrandChild, Test;

        GrandParent = document.getElementById("GrandParent");
        Parent = document.getElementById("Parent");
        Me = document.getElementById("Me");
        Child = document.getElementById("Child");
        GrandChild = document.getElementById("GrandChild");
        Test = document.getElementById("Test");

        GrandParent.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
          e.stopPropagation();
        });

        Parent.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
          e.stopPropagation();
        });

        Me.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
          e.cancelBubble = true;
        });

        Child.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
          e.stopPropagation();
        });

        GrandChild.addEventListener('click', function(e){
          console.log("My Name is " + this.id);
          e.cancelBubble = true;
        });
        
      });
    </script>
  </body>
</html>

이 코드를 실행시키고 a링크된 텍스트를 클릭하면 당연히 text.html로 페이지는 변하게 됩니다.

하지만 이러한 이벤트를 막고싶을때 preventDefault 메서드를 사용하면 됩니다.

Test.addEventListener('click', function(e){
console.log("My Name is " + this.id);
e.cancelBubble = true;
e.preventDefault();
});

이렇게 한다면, 버블링도 막고, a링크 원래의 기능도 막을수 있습니다.

14.mobx-part1

Jaro — Fri, 28 Jul 2017 19:19:20 +0900

MobX

MobX란?

Simple, scalable state management

https://github.com/mobxjs/mobx

mobx는 redux처럼 state를 관리해주지만, redux와는 다른점이 좀 있는 라이브러리입니다.

위에서 명시하여쓴 간단하고, 확장 가능한 상태 관리 도구입니다.

주요 특징

* 데코레이터(Decorator) 를 적극 활용합니다. -> Decorator에 대해서는 mobx 포스팅을 마친뒤 별도로 포스팅 하여 링크하겠습니다.

* Typescript를 base로 만들어졌기 때문에 typescript에 대한 지원이 좋습니다.

* Redux와는 매우 큰 차이로, 단일 스토어를 강제하지 않습니다!

* 처음 사용이 Redux보다는 쉽습니다.

mobx의 전체적인 동작을 나타낸 그림인데요,

그림에 대한 설명은 예제를 통해 알아보면서 이해할수 있도록 해보겠습니다.

이제 CRA를 이용해 프로젝트를 생성하는것은 익숙해지셨을것입니다.

새로운 프로젝트를 생성해주세요.

그리고 App.tsx는 containers 폴더로 이동하고 index.tsx 파일 생성과,

component 폴더 생성 및 index.tsx 생성까지 해주세요.

매우 간단한 MobX 예제 따라하기

step 1 - state 객체를 정한다. -> 리액트의 state가 아니다.

step 2 - 정한 state 객체에 @observable 데코레이터를 붙인다.

step 3 - state 값을 다루는 함수들을 만든다.

step 4 - state 값이 변경되면 반응하는 컴포넌트를 만든다. -> 이 컴포넌트에 @observer 붙인다

step 5 - 컴포넌트에서 state값을 사용한다.

step 6 - 컴포넌트에서 state값을 변경하는 함수를 사용한다.

Step 1 ~ 2

src폴더에 stores 폴더를 생성해주세요. 그리고 index.tsx 파일과 AgeStore.tsx 파일을 생성해주세요.

src/stores/AgeStore.tsx

import { observable } from 'mobx';

export class AgeStore {
    
    @observable 
    age: number = 30;

}

우선 기본적으로 클래스를 만들고 그 안에 age 라는 값을 명시합니다.

여기서 감지할 값에 @observable 을 사용해줘야 하는데, 여기서는 age 값에 해주겠습니다.

observable은 mobx 에 있는 기능이므로, mobx를 설치해주세요.

yarn add mobx

혹은

npm install --save mobx

자 그런데, 이렇게 해도 아마 에디터에서는 오류를 내며 뭐라뭐라 할것입니다.

왜냐하면 @ observable은 데코레이터인데, typescript에서 데코레이터를 사용하기 위해서는

tsconfig의 설정에서 experimentalDecorators 값을 true로 해주어야 합니다.

하지만 디폴트값이 false로 되있기 때문에 직접 true로 바꿔 줘야 합니다.

tsconfig.json

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "experimentalDecorators": true // 데코레이터를 사용하기 위해 true로 변경
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "types": [
    "typePatches"
  ]
}

src/stores/index.tsx

import AgeStore from './AgeStore';

export { AgeStore };

Step 3

이제 함수를 생성해 주겠습니다.

기본적으로 state 값을 가져오는 get 함수와 set 함수를 생성하도록 하겠습니다.

import { observable } from 'mobx';

export default class AgeStore {
    
    @observable 
    private _age: number = 30;

    constructor(age: number) {
        this._age = age;
    }
    public getAge(): number {
        return this._age;
    }
    public setAge(age: number): void {
        this._age = age;
    }

}

Step 4

Age component를 만들겠습니다.

src/components/Age.tsx

import * as React from 'react';

class Age extends React.Component<{}, {}> {
  constructor(props: {}) {
    super(props);
  }
  render() {
    return (
      <div className="Age">
      </div>
    );
  }
}

export default Age;

src/components/index.tsx

import Age from './Age';

export { Age };

Step 5 ~ 6

컴포넌트에서 age값을 사용해보도록 하겠습니다.

import 해주시고

import { AgeStore } from '../stores';

생성해줍니다. ( store라고 생각하시면 됩니다. )

const ageState = new AgeStore(30);

render() {
    return (
      <div className="Age">
        <h1>{ageState.getAge()}</h1>
        <button onClick={() => this.addAge()}>한해가 지났다.</button>
      </div>
    );
  }

그리고 값이 증가하는 함수와 버튼까지 추가해 보도록 하겠습니다.

import * as React from 'react';

import { AgeStore } from '../stores';

const ageState = new AgeStore(30);

class Age extends React.Component<{}, {}> {
  constructor(props: {}) {
    super(props);
    this.addAge = this.addAge.bind(this);
  }
  render() {
    return (
      <div className="Age">
        <h1>{ageState.getAge()}</h1>
        <button onClick={() => this.addAge()}>나이증가</button>
      </div>
    );
  }
  addAge() {
    const age = ageState.getAge();
    ageState.setAge(age + 1);
    console.log(ageState.getAge());
  }
}

export default Age;

이제 실행해보겠습니다.

버튼을 아무리 눌러도 값이 변하는것처럼 보이지는 않습니다.

그런데 제가 위의 코드에 addAge 함수에 console.log를 하나 삽입해 놓은것이 있습니다.

개발자 도구로 로그를 살펴보겠습니다.

값은 증가하는데, 렌더링 적용만 안되었다고 추론할수 있습니다.

이제 @observer 를 적용시켜 보겠습니다.

observer 는 mobx-react 를 설치해야 사용 가능합니다.

yarn add mobx-react

혹은

npm install --save mobx-react

import * as React from 'react';

import { AgeStore } from '../stores';

import { observer } from 'mobx-react';

const ageState = new AgeStore(30);

@observer
class Age extends React.Component<{}, {}> {
  constructor(props: {}) {
    super(props);
    this.addAge = this.addAge.bind(this);
  }
  render() {
    return (
      <div className="Age">
        <h1>{ageState.getAge()}</h1>
        <button onClick={() => this.addAge()}>나이증가</button>
      </div>
    );
  }
  addAge() {
    const age = ageState.getAge();
    ageState.setAge(age + 1);
    console.log(ageState.getAge());
  }
}

export default Age;

간단하게 observer를 import하고, 사용할 컴포넌트 위에 @observer 를 명시해줍니다.

실행해주세요.

이제 정상적으로 렌더링이 됩니다.

즉, 변화를 감지하고 싶은 대상에는 observable 데코레이터 를 사용하고,

observable된 값 변화에 따라 반응하는 컴포넌트에는 observer 데코레이터를 사용하여

제어하는 간단한 구조입니다.

뭔가 redux보다는 확실히 중간 과정이 편한 느낌입니다.

redux는 액션타입을 지정하고, 액션 크리에이터 함수를 만들고, 리덕스를 만들고, 스토어 생성한다음,..... 많은 과정이 필요하지만, mobx는 그 과정이 정말 최소화된 느낌입니다.

물론 각각의 장단점이 있으리라 생각되지만, 더 공부를 해야 확실하게 생각을 말할수 있을거 같습니다.

이번 포스팅은 간단하게 끝내고, 다음 포스팅도 계속해서 mobx에 대해 포스팅을 하도록 하겠습니다.

감사합니다.

소스코드 주소입니다.

https://github.com/JaroInside/tistory-react-typescript-study/tree/14.mobx-part1

참고 슬라이드 - http://slides.com/woongjae/react-with-typescript-4 #/

참고 동영상 - https://www.youtube.com/playlist?list=PLV6pYUAZ-ZoHx0OjUduzaFSZ4_cUqXLm0